vue3 slot

Vue 3中的插槽（slot）与Vue 2中的插槽有一些改变。在Vue 3中，默认插槽已被移除，取而代之的是具名插槽。具名插槽允许您在父组件中通过名称引用子组件中的内容。

在父组件中，您可以使用`<slot>`元素来定义插槽，并为其添加一个名称。例如：

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

在子组件中，您可以使用`<template v-slot:插槽名称>`或者简写的`#插槽名称`来填充具名插槽。例如:

<template>
  <div>
    <slot name="header">默认头部内容</slot>
    <!-- 默认插槽的内容可以直接写在标签内 -->
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

父组件使用子组件时，可以将内容放入相应的插槽中。例如：

<template>
  <MyComponent>
    <template v-slot:header>
      <!-- 这里是插入到名为 "header" 的插槽中的内容 -->
    </template>
    <!-- 默认插槽的内容可以直接写在标签内 -->
    <div>
      <!-- 这里是插入到默认插槽中的内容 -->
    </div>
    <template v-slot:footer>
      <!-- 这里是插入到名为 "footer" 的插槽中的内容 -->
    </template>
  </MyComponent>
</template>

希望这个回答对您有所帮助！如果还有其他问题，请随时提出。