vue3 使用具名插槽

Vue 3 中的具名插槽与 Vue 2 中的类似，但有一些语法上的变化。具名插槽可以让你在父组件中定义一个或多个插槽，然后在子组件中使用这些插槽，以便渲染特定的内容。

以下是一个使用具名插槽的示例：

在父组件中，你可以定义一个具名插槽：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

在子组件中，你可以使用这些插槽，并通过 `v-slot` 指令指定插槽的名称：

<template>
  <BaseLayout>
    <template v-slot:header>
      <h1>这是头部</h1>
    </template>
    <template v-slot:content>
      <p>这是内容</p>
    </template>
    <template v-slot:footer>
      <p>这是页脚</p>
    </template>
  </BaseLayout>
</template>

在这个示例中，我们在 `BaseLayout` 组件中定义了三个具名插槽：`header`、`content` 和 `footer`。在子组件中，我们使用 `v-slot` 指令来指定要使用的插槽的名称，然后在插槽中渲染相应的内容。

注意，在 Vue 3 中，你也可以使用 `#` 作为 `v-slot` 的简写，例如：

<template>
  <BaseLayout>
    <template #header>
      <h1>这是头部</h1>
    </template>
    <template #content>
      <p>这是内容</p>
    </template>
    <template #footer>
      <p>这是页脚</p>
    </template>
  </BaseLayout>
</template>

这是一个使用具名插槽的简单示例，你可以在实际开发中根据需要定义更多的插槽。