标签：log .text 学习 highlight 使用 保存 ext from code
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!!!!
标签：log .text 学习 highlight 使用 保存 ext from code
原文地址：http://www.cnblogs.com/scdisplay/p/6524313.html
