Vue 的插槽语法

<slot></slot> 用于决定组件起始标签和结束标签之间的内容在组件模板中的渲染位置，没有插槽的话，组件标签中的内容不会渲染；

语法

1.插槽可以有后备内容，<slot><p>1</p>k</slot>，后备内容在子标签之间没有内容的时候会渲染；
2.插槽可以有名字（具名插槽），<slot name="xxx"></slot>，默认情况下，name 属性是 default
使用：在组件标签之间使用 有 v-slot 属性的<template> 标签，通过这样的方式告诉编译器把这部分内容放到 name 为 xxx 的插槽位置

<template v-slot:xxx>
  <p>place these paragraph in xxx slot.</p>
</template>

注意，一个具名插槽只能添加在一个 template 上，即，只能有一个地方执行这个具名插槽，其它的都指向默认插槽

3.方向通信，把子组件的数据，传到子组件起始标签和结束标签之间使用
1）在组件内部(在 slot 元素 v-bind: 一个数据)：

//子组件内的 user 作为 `<slot>` 元素的 user 特性绑定上去
<slot v-bind:user="user">
 {{user}}
</slot>

2）在组件标签之间(父级作用域)

//slotProps（可以自己改名字） 包含了所有子组件没传过来的数据，比如上面传来的 user
<template v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</template>

3)如果，只有默认插槽，那么我们可以简写：

//直接把 v-slot:default="xxx" 写在组件标签上；而且 `:default` 可以简写
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

4)在只有默认插槽的时候，v-slot:default="xxx"可以简写为 v-slot="xxx"

5)另外一种简写：v-slot: 可以简写为 #
注意，用#简写 v-slot:的时候，default 不能不写，即，#="xxx" 没法代表v-slot:defult="xxx",正确的写法是：#default="xxx"

总结下来：

1.用 v-slot:xxx 指向名字为 xxx 的插槽
2.用 v-slot:xxx="yyy", 接收 xxx 插槽 v-bind 的数据，所有数据组合成一个对象，给这个对象命名 yyy