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!!!!

巴特西

vue日常学习（2）

最新文章

热门文章