vue3插槽

• 父级组件中使用 ​​ <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>