vue3 插槽slot
插槽是子组件中的提供给父组件使用的一个占位符，用
一、匿名插槽
子组件 FancyButton 中插槽模板
# 基础用法
# 可指定默认插槽内容：父组件没有提供任何插槽内容时，默认渲染的插槽内容 Submit
父组件填充插槽内容
Click me!
# 或
Click Me
最终渲染出的 DOM 结构如下
ps.
通过使用插槽，使组件更加灵活和具有可复用性。这样组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。
二、具名插槽 (named slots)
具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
对于这种场景，name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：
子组件预留的插槽
<-- 没有提供 name 的 slot 出口会隐式地命名为 “default” -->
父组件对指定插槽进行填充
要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的 元素，并将目标插槽的名字传给该指令。
header
default
footer
v-slot 语法糖（简写方式）
v-slot 有对应的简写 #，因此 可以简写为 。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
# 或
# 当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 节点都被隐式地视为默认插槽的内容。所以上面也可以写成：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
现在 元素中的所有内容都将被传递到相应的插槽。最终渲染出的 HTML 如下：
Here might be a page title
A paragraph for the main content.
And another one.
三、动态插槽
动态指令参数在 v-slot 上也是有效的，即可以通过变量定义动态插槽名：
动态插槽
动态插槽
四、作用域插槽
在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。可以使用属性绑定的方式向一个插槽的出口上传递数据，称为插槽 props 。
4.1 匿名插槽数据传递
子组件 MyComponent传递插槽 props
父组件接收插槽 props：默认插槽通过子组件标签上的 v-slot 指令，直接接收到了一个插槽 props 对象
{{ slotProps.text }} {{ slotProps.count }}
# 或 在 v-slot 中使用解构语法
{{ text }} {{ count }}
4.2 具名插槽数据传递
具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到：v-slot:name="slotProps"。
{{ headerProps }}
{{ defaultProps }}
{{ footerProps }}
4.3 作用域插槽应用场景：高级列表组件示例
你可能想问什么样的场景才适合用到作用域插槽，这里我们来看一个
{{ body }}
by {{ username }} | {{ likes }} likes
在 v-bind 来传递插槽的 props)：
-
上面的