插槽是什么
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，一个slot的核心问题，就是显不显示：父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。但是插槽显示的位置是由子组件自己所决定的，slot写在组件template的什么位置，父组件传过来的模板将会显示在什么位置
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即
v-slot指令)。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在[文档中]的特性。
插槽和具名插槽
插槽:父组件以另外一种方式（不是通过常规的 Props 属性传递机制）向子组件传递信息。
具名插槽和常规插槽非常类似，唯一的差别就是你可以在你的目标组件多个位置传入你的文本
我们在这里使用新的 Vue 2.6 语法来指定我们想要定位的插槽：v-slot:theName。
这种方式在项目中比较常用，可以当成一个复用（通用）模板组件。如多个组件的布局使用相似模板，只是具体内容不同，那么我们可以使用这种插槽方式封装成一个通用组件，在其他组件使用的时候只需要传对应的内容到对应名字的插槽即可，不需要将该模板在每个组件重新写一遍，减少代码冗余，大大提高开发效率。
作用域插槽
插槽的内容中有需要访问到子组件里面的内容
作用域插槽适合的场景是至少包含三级以上的组件层级，是一种优秀的组件化方案
ElementUI里面的表格el-table，当改变某一列展示的字段时，我们经常使用：
<el-table-column>
<template slot-scope="scope">
<span>{{scope.row.xxx}}</span>
</template>
</el-table-column>
再比如
<template>
<div>
<p>我是B组件</p>
<slot name="isB" :obj="obj">{{obj.lastName}}</slot>
</div>
</template>
<template>
<div class="main">
<p>我是A组件</p>
<B>
<template v-slot:isB="data">
{{data.obj.lastName}}
</template>
</B>
</div>
</template>
解构插槽 如上随便起了个名字，当然我们也可以不起名字就解构一下，还是用上面得例子只是父组件改变一下
<template>
<div class="main">
<p>我是A组件</p>
<B>
<template v-slot:isB = {data}>
{{data.lastName}}
</template>
</B>
</div>
</template>
具名插槽缩写
v-slot:header可以缩写成#header 注意：如果我们父组件需要用到子组件的user，即使是没有名的插槽也要#default="{user}",不能写成#="{user}" 注意：默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确
