vue3 具名插槽如何使用

在 Vue3 中，可以通过在组件中使用 `<slot>` 标签来定义插槽，支持具名插槽和默认插槽。

具名插槽可以通过在 `<slot>` 标签上添加 `name` 属性来定义，例如：

<!-- 父组件 -->
<template>
  <child-component>
    <template #header>
      <h1>这是头部</h1>
    </template>
    <template #footer>
      <h1>这是底部</h1>
    </template>
  </child-component>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <div>这是内容区域</div>
    <slot name="footer"></slot>
  </div>
</template>

在上面的例子中，父组件在使用子组件时在`<template>`标签上使用了 `#` 符号来定义插槽的名称，子组件中则通过与插槽名称相同的 `name` 属性来识别插槽。