插槽分为3种，一种是默认插槽、一种是具名插槽、一种是作用域插槽。
插槽的定义：在子组件中用 <solt></solt> 划出一块区域用来显示父组件中的页面结构，显示的结构在父组件的子组件标签中设置。所以slot就相当于一个占位的东西，如果没有提供数据，那它就会显示自己的默认的数据。
插槽大白话：
A代表父组件，B代表子组件，奶茶代表数据。
例如：A想要喝奶茶，让B去买。如果A告诉了B要香芋奶茶那么B就会买香芋奶茶，如果没告诉B，那B就会买一杯普通的奶茶。
插槽最后显示与不显示是看父组件中引入的子组件标签中有没有模版内容。
默认插槽：默认插槽又可以叫做匿名插槽，默认插槽是不需要 name 属性，它隐藏的 name 属性为 default 。
默认插槽可以放置在组件任意位置，一个组件中只能有一个默认插槽。
具体实现：
// 父组件<template> <div> // 父组件中引入的子组件 <san> <div>我是父组件的数据</div> </san> </div></template>// 子组件<template> <div> // 第一个默认插槽 <slot> <div>我是子组件的默认值</div> </slot> // 第二个默认插槽 <solt> <div> 子组件第二个默认插槽 </div> </solt> </div></template>页面显示：
如果父组件不传数据：
// 父组件<template> <div> // 父组件中引入的子组件 <san></san> </div></template>// 子组件<template> <div> <slot> <div>我是子组件的默认值</div> </slot> </div></template>则显示：
具名插槽：有时我们的页面需要多个插槽，那么此时就需要用到具名插槽，也可以叫做有名插槽。
与匿名插槽的区别就是具名插槽是通过设置不同的 name 属性来区分多个slot。也就是说具名插槽可以有多个。
具体实现：
// 父组件<template> <div> <san> <template slot="san1"> <div>我是父组件的数据</div> </template> <div slot="san2"> 第二个具名插槽2 </div> </san> </div></template>// 子组件<template> <div> <slot name="san1"> <div>我是子组件的默认值</div> </slot> <slot name="san2"></slot> </div></template>页面显示：
作用域插槽：相比前面两种插槽的内容和样式皆由父组件决定，作用域插槽的特别之处在于它的样式由父组件决定，但是内容却由子组件控制。
前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。
Vue官方在2.6版本以后改变了插槽的书写方式。
2.6版本之前的写法：
// 父组件<template> <div> <son> <template slot-scope="san"> <p v-text="san.item"></p> </template> </son> </div></template>// 子组件<template> <div> <ul> <li v-for="(item, index) in list" :key="index"> <slot :item="item"></slot> </li> </ul> </div></template><script>export default { data() { return { list: ["giao", "你好", "中国"], }; },};</script>页面显示：
2.6版本之后的写法：
子组件的写法不用变，父组件的写法变化如下：
<template> <div> <son> <template v-slot="san"> {{ san }} <p v-text="san.item"></p> </template> </son> </div></template>页面显示：
抛弃了 slot-scope 使用了v-slot.