vue2.0 之 slot 内容分发
前提：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。被分发的内容会在父作用域内编译。
一、单个插槽
// 子组件模板 child-component <div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div> // 父组件模板： // 父组件模板中的子组件child-component中的内容渲染到slot插槽中， // 若插槽中原有默认内容，会替换掉；
// 若子组件child-component只有一个没有属性的插槽，则父组件中的所有传入内容将被渲染在此插槽处；
// 若一个插槽都没有，则父组件模版中的子组件child-component中的内容会被丢弃
<div>
<h1>我是父组件的标题</h1>
<child-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</child-component>
</div>
// 渲染结果：
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
二、具名插槽
<slot> 元素用属性 name 来进一步配置如何分发内容。具名插槽将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名插槽，作为默认插槽，作为找不到匹配的内容片段的备用插槽。若无默认插槽，这些找不到匹配的内容片段将被抛弃
// 子组件模板：child-component
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot> //默认插槽
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
// 父组件模板：
<div>
<h2>父组件模版标题</h2>
<child-component>
<h1 slot="header">这里可能是一个页面标题</h1>
// 为匹配到的内容，插入到默认插槽中
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</child-component>
</div>
// 渲染结果为：
<div>
<h2>父组件模版标题</h2>
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>
</div>
三、作用域插槽
v2.1.0
作用域插槽是一种特殊类型的插槽，能被传递数据。在子组件中，只需将数据传递到插槽，就可以像 props 一样传递数据。
// 子组件模板 child-component <div class="child"> <slot text="msg from child"></slot> </div>
在父级中，具有属性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：
// 父组件模板 <div class="parent"> <child-component> <template slot-scope="props"> <span>msg from parent</span> <span>{{ props.text }}</span> </template> </child-component> </div> // 渲染成： <div class="parent"> <div class="child"> <span>msg from parent</span> <span>msg from child</span> </div> </div>
在组件开发中，Element-UI广泛使用
demo:
// 父组件模版
......其他模版代码
<list :data="listData" class="img-list"> <template scope="scope"> <div class="info"> <p>数据：{{scope}}</p> <p>索引：{{scope.$index}}</p> <p>姓名：{{scope.row.name}}</p> <p>性别：{{scope.row.sex}}</p> </div> </template> </list>
........其他模版代码
// 子组件模版 list <ul> <li v-for="(item,i) in data"> <slot :row="item" :$index="i"></slot> </li> </ul>
js:
......
props: {
data: {
default: [],
type: Array
}
}
.....
父模版渲染后：
<ul> <li v-for="(item,i) in data"> <div class="info"> <p>数据：{{item}}</p> <p>索引：{{item.i}}</p> <p>姓名：{{item.name}}</p> <p>性别：{{item.sex}}</p> </div> </li> </ul>
父组件把数据listData传递给子组件 data , 子组件通过作用域插槽把值传递给父组件scope
注意：<slot :row="item" :$index="i"></slot> 这里的属性在上面list组件调用的时候就会打印出一个对象{ "row": { "name": "张三", "sex": "男" }, "$index": 0 }
v2.5.0+
slot-scope 能被用在任意元素或组件中而不再局限于 <template>
// 子组件模版 my-list <ul> <slot name="item-child" v-for="item in items" :text="item.text"> <!-- 这里写入备用内容 --> </slot> </ul>
// 父组件模版
<my-list :items="items"> <li slot="item-child" slot-scope="props" class="my-fancy-item"> {{ props.text }} </li> </my-list>
