插槽，简单理解就是可以即插即用的一段代码。vue中，插槽可以大致分为以下三种：
- 默认插槽
- 具名插槽
- 默认插槽
1、默认插槽
子组件内写法(child.vue)：
<template>
<!--组件内其他代码-->
<slot></slot>
<!--组件内其他代码-->
</template>
父组件内写法(parent.vue)
<Child>
<template>
<span>插槽内要显示的内容</span>
</template>
</Child>
最后渲染出来的结果:
<!--组件内其他代码-->
<span>插槽内要显示的内容</span>
<!--组件内其他代码-->
所以，简单来说，默认插槽就是子组件内占了一个位置，在父组件内调用子组件的时候，写入什么内容，就会在这个位置显示出什么内容来。
2、具名插槽
子组件内写法(child.vue)：
<template>
<!--组件内其他代码-->
<slot name="slot1"></slot>
<slot></slot>
<slot name="slot2"></slot>
<!--组件内其他代码-->
</template>
父组件内写法(parent.vue):
<Child>
<template v-slot="slot1">
<span>插槽slot1内显示的内容</span>
</template>
<!--也可以使用 #插槽名 的形式-->
<template #slot2>
<span>插槽slot2内显示的内容</span>
</template>
<template>
<span>默认插槽内要显示的内容</span>
</template>
</Child>
最后渲染出来的结果:
<!--组件内其他代码-->
<span>插槽slot1内显示的内容</span>
<span>插槽内要显示的内容</span>
<span>默认插槽内要显示的内容</span>
<!--组件内其他代码-->
由此可见，具名插槽就是，子组件内定义插槽的时候，取了一个名字，父组件调用的时候，通过v-slot="插槽name"指令将内容分发至指定位置，从而在页面渲染出来。需要注意的是：最后渲染出来的内容，是由子组件内定义的插槽的内容位置，与父组件内调用时传入的slot顺序没有关系。
3、作用域插槽
有时候，我们在插槽内想访问子组件内的数据时，就需要用到作用域插槽。
子组件内写法(child.vue)：
<template>
<!--组件内其他代码-->
<slot name="slot1" propsName="我是子组件内slot1的数据"></slot>
<slot name="slot2" :propsName="{a:1,b:2}"></slot>
<!--组件内其他代码-->
</template>
父组件内写法(parent.vue):
<Child>
<template #slot1="data">
<span>{{data.propsName}}</span>
</template>
<template #slot2="data">
<span>{{data.propsName.a}} ---- {{data.propsName.b}}</span>
</template>
</Child>
最后渲染出来的结果:
<!--组件内其他代码-->
<span>我是子组件内slot1的数据</span>
<span>1---2</span>
<!--组件内其他代码-->
作用域插槽，就是在子组件内以propName="data"的形式传数据，在父组件写插槽的时候用#插槽名="定义的对象名"的形式接受，插槽内用{{定义的对象名.propName}}的形式使用数据。也可以用过解构的写法：
子组件内写法(child.vue)：
<template>
<!--组件内其他代码-->
<slot name="slot1" prop1="我是prop1的内容" prop2="我是prop2的内容"></slot>
<!--组件内其他代码-->
</template>
父组件内写法(parent.vue):
<Child>
<template #slot1="{prop1, prop2}">
<span>{{prop1}}-----{{prop2}}</span>
</template>
</Child>
最后渲染出来的结果:
<span>我是prop1的内容-----我是prop2的内容</span>
总结
插槽虽然在日常封装的简单组件中比较少用到，但却是封装高级组件中必不可少的功能，插槽可以大大提高组件的可复用性。例如：一个组件，在A页面与B页面调用时，只有组局部稍有差异，或者这部分内容在每个页面显示的形态都不一样，就可采用插槽的形式封装这部分。
当然，此次分享作者也只是抛砖引玉，欢迎各位大佬分享指正。
