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