- 父级组件中使用 <A> </A> 并且不提供任何插槽内容时，子组件中 <slot></slot>标签中的内容当作默认内容展示。
- v-slot 只能添加在 <template（一种情况除外，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上。
- 缩写， v-slot: 替换为字符 #。例如 v-slot:header 可以被重写为 #header。
- 默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。
- 多个插槽，要始终为所有的插槽使用完整的基于 <template
匿名插槽
父组件： <A> 这是xxxxx数据 这是yyyyy数据 </A> 子组件： <header> <div>头部</div> <slot></slot> </header> <footer> <div>底部</div> <slot></slot> </footer>
具名插槽
父组件: <A> <template v-slot:xxx> 这是xxxxx数据 </template> <template v-slot:yyy> 这是yyyyy数据 </template> </A> ***简写：<template #xxx> 子组件： <header> <div>头部</div> <slot name='xxx'></slot> <slot name='yyy'></slot> </header>
作用域插槽
绑定在 <slot > 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字，当然也可以直接解构，以下我直接使用解构。
使用解构时，可以重新命名，例如将 data 重命名为 item：
父组件： <template v-slot='{data}'> {{ data.name }} --> {{ data.age }} </template> 简写：<template #default='{data}'> 子组件： <div v-for='item in list' :key='item.id'> <slot :data='item'></slot> </div> <script setup> const list = ref([ {name:"张三",age:"21"}, {name:"李四",age:"22"}, {name:"王五",age:"23"}, ]) </script>
动态插槽
父组件： <template #[xxx]> 这是xxxxx数据 </template> <script setup> let xxx = ref('xxx'); </script>
