本文参考官网的插槽，你可以在 CodeSandBox 测试效果，基本模板已经给出。
在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即
v-slot指令)。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。
默认插槽（单个插槽）
使用
我是一个标题
仅在没有插槽内容时显示
你可以在
将组件与数据用于插槽
当组件渲染的时候，
注意：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
具名插槽（多个插槽）
自 2.6.0 起有所更新。已废弃的使用
slot属性的语法在这里。
对于这样的情况，name。这个属性可以用来定义额外的插槽：
Default content
一个不带 name 的 default。
在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。
它将替换为以下内容：
Here might be a page title
A paragraph for the main content.
And another one.
注意 v-slot 只能添加在 上（只有一种例外情况），这一点和已经废弃的 slot 属性 不同。
作用域插槽
自 2.6.0 起有所更新。已废弃的使用
slot-scope属性的语法在这里。
有时让插槽内容能够访问子组件中才有的数据是很有用的。
下面例子中，为了让 user 在父级的插槽内容中可用，我们可以将 user 作为
绑定在 v-slot 来定义我们提供的插槽 prop 的名字：
{{ user }}
我在父组件头部传递内容给子组件的插槽
在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，你可以随意命名，也可以解构它：
{{ user }}
我在父组件头部传递内容给子组件的插槽
当只有默认插槽时，你可以这么写：
{{ slotProps.user }}
我在父组件头部传递内容给子组件的插槽
直接将 v-slot 用在组件上，但注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
{{ user }}
header 在这里无法使用
只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法：
{{ user }}
{{ footer }}
动态插槽名（2.6.0 新增）
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：
...
具名插槽的缩写（2.6.0 新增）
v-slot 的缩写为 #，例如 v-slot:header 可以的简写为 #header：
Here might be a page title
该简写只在其有参数的时候才可用。以下语法是无效的：
{{ user }}