在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即
v-slot指令)。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的特性。
插槽内可以包含任何模板代码，包括 HTML，甚至其他的组件。
slot有三种类型
- 默认插槽
default - 具名插槽
name - 作用域插槽
v-slot
在子组件中：
- 插槽用
name的default”。 - 具名插槽用
name属性来表示插槽的名字 - 作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用
// Child.vue
没传内容
没传header插槽
v-slot
- 具名插槽通过指令参数v-slot:插槽名的形式传入，可以简化为 #插槽名
- 作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性
- v-slot属性只能在上使用，但在【只有默认插槽时】可以在组件标签上使用
//Parent.vue
// v-slot:default
默认插槽
// v-slot:header
具名插槽
//v-slot:footer
{{slotProps.testProps}}
注意
- 默认插槽名为default，可以省略default直接写v-slot。缩写为#时不能不写参数，写成#default（这点所有指令都一样，v-bind、v-on）
- 多个插槽混用时，v-slot不能省略default
- 只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法
示例
插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
例如，我们要实现一个
-
{{ todo.text }}
我们可以将每个 todo 作为父级组件的插槽，以此通过父级组件对其进行控制，然后将 todo 作为一个插槽 prop 进行绑定：
-
{{ todo.text }}
现在当我们使用
✓
{{ todo.text }}
这里用到了解构插槽，v-slot:todo="{ todo }"
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：
function (slotProps) {
// 插槽内容
}
这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。
参考
slot详解，slot、slot-scope和v-slot
插槽-Vue文档