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