关于Vue slot的理解
slot是什么
slot，也就是插槽，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。
单个插槽 | 默认插槽 | 匿名插槽
首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。
单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。
下面通过一个例子来展示。
父组件：
<template>
<div class="fourth-container">
<h3>我是父组件</h3>
<child>
<span>我是文字</span>
</child>
</div>
</template>
子组件：
<template>
<div class="lockInfo">
<h3>我是是子组件</h3>
<slot></slot>
</div>
</template>
页面显示
页面渲染
如果没有slot站位父组件嵌套在子组件中的内容不会显示出来
具名插槽
匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。下面的例子，就是一个有两个具名插槽和单个插槽的组件，这三个插槽被父组件用同一套css样式显示了出来，不同的是内容上略有区别。
父组件：
<template>
<div class="fourth-container">
<h3>我是父组件</h3>
<child>
<span slot='header'>具名插槽header</span>
<span>匿名插槽</span>
<span slot='footer'>具名插槽footer</span>
</child>
</div>
</template>
子组件：
<template>
<div class="lockInfo">
<h3>我是是子组件</h3>
<slot name='header'></slot>
<slot></slot>
<slot name='footer'></slot>
</div>
</template>
页面显示
页面渲染
作用域插槽 | 带数据的插槽
最后，就是我们的作用域插槽。这个稍微难理解一点。官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。
在slot上面绑定数据。也就是你得写成大概下面这个样子。
<slot name="header" :data="data"></slot>
export default {
data: function(){
return {
data: ['列表1','列表2','列表3','列表4','列表5','列表6']
}
},
}
父组件中这样写
<h3>这里是父组件</h3>
<child>
<ul slot='header' slot-scope="list">
<li v-for="item in list.data"></li>
</ul>
</child>
页面显示
页面渲染
