嘘，多看图少看文
释义
slot, 解释为插槽，它是组件的一块 HTML模板，而这块模板 显示与否 以及 如何显示，取决于父组件。
props 可以从 父组件 向 子组件 传递 数据;
slot 可以从 父组件 向 子组件 传递 html。
显示与否
- 子组件至少包含一个slot插槽，否则父组件的的内容不会被展示；
查看源码 - 如果子组件包含slot插槽
插槽显示的位置 由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。
那么如何显示呢
插槽可分为单个插槽、具名插槽和作用域插槽。
单个插槽
顾名思义，一个组件中只能有一个单个插槽。
上面的三个源码中的slot，都是 单个插槽。单个插槽没有 name 属性。
具名插槽
- 具名插槽，比单个插槽，多了个 name 属性。
- 具名插槽 将匹配内容片段中有对应 name 的元素。
- 具名插槽可以在一个组件中出现N次，出现在不同的位置。出现的位置以子组件内的顺序为准。
查看源码
从源码中，可以看出，父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联 单个插槽。
作用域插槽
作用域插槽，区别于单个插槽和具名插槽，需要 在slot上绑定数据。
<!--父组件-->
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
</template>
<!-- 子组件 -->
<template>
<div class="child">
<h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['小明','小红','小胡','小管']
}
}
}
