• vue日常学习(2)


    1.组件学习之内容分发

    1.1 作用域插槽

    父级

    <div class="parent">
      <child>
        <template scope="props">
          <span>hello from parent</span><br/>
          <span>{{ props.text }}</span><br/>
        <span>{{ props.text2 }}</span><br/>
        <span>{{ props.text3 }}</span> </template> </child> </div>

    子级模板

    <div class="child"> 
    <span>first hello</span> <slot text="hello from child" text2="hello again"></slot> 
    <slot text3='hello!!!!'></slot> </div>

    其中child组件首先会调用模板,然后在使用child组件时标签内的template部分将会被渲染到子组件child的slot标签中。

    scope 的值对应一个临时变量名(保存的是对象),此变量接收从子组件中传递的 prop 对象,每个slot会产出一个prop对象,在这里就分别是{text:'hello from child',text2:'hello again'}和{text3:'hello!!!!'},每个slot都会用template渲染一次,最终完成渲染。

    注:对于组件将要分发的内容,如果没有指定slot名字(不是具名slot),那么分发的内容将会在子组件中的每个slot中都进行渲染。

    输出结果是

    first hello
    here is parent
    hello from child
    hello again
    here is parent
    
    
    hello!!!!
    

      

  • 相关阅读:
    RTT设备与驱动之串口
    RTT设备与驱动之PIN设备
    RTT之ENV
    MQTT学习之一
    思维导图软件
    英语单词学习方法
    RTT之POSIX
    10 个强大的JavaScript / jQuery 模板引擎推荐
    30个实用的jQuery选项卡/导航教程推荐
    jquery 自动完成 Autocomplete插件汇总
  • 原文地址:https://www.cnblogs.com/scdisplay/p/6524313.html
Copyright © 2020-2023  润新知