Vue3:插槽（slot，useSlots，useAttrs）

在Vue 3中，插槽是一种让父组件能够向子组件传递内容的机制。Vue 3提供了<slot>元素来定义插槽，以及相关的useSlots和useAttrs函数来访问插槽内容和属性。

以下是一个简单的例子：

父组件：

<template>
  <ChildComponent>
    <template #default>
      <p>这是默认插槽的内容</p>
    </template>
    <template #header>
      <h1>这是名为header的插槽内容</h1>
    </template>
  </ChildComponent>
</template>
 
<script>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default defineComponent({
  components: {
    ChildComponent
  }
});
</script>

子组件（ChildComponent.vue）：

<template>
  <div>
    <slot /> <!-- 默认插槽 -->
    <slot name="header" /> <!-- 具名插槽 -->
  </div>
</template>

使用useSlots和useAttrs的例子：

子组件：

<template>
  <div>
    <slot name="default" v-bind="$attrs"/>
    <slot name="header" v-bind="$attrs"/>
  </div>
</template>
 
<script>
import { useSlots, useAttrs } from 'vue';
 
export default {
  setup() {
    const slots = useSlots();
    const attrs = useAttrs();
 
    return {
      slots,
      attrs
    };
  }
};
</script>

父组件：

<template>
  <ChildComponent>
    <p>这是默认插槽的内容</p>
    <p>这是具名插槽header的内容</p>
  </ChildComponent>
</template>
 
<script>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default defineComponent({
  components: {
    ChildComponent
  }
});
</script>

在这个例子中，ChildComponent子组件定义了两个插槽：默认插槽和名为"header"的插槽。父组件通过模板传递内容到这些插槽。子组件使用useSlots和useAttrs来访问这些插槽和非 prop 属性。