vue3如何使用插槽

在 Vue 3 中，使用插槽的方式与 Vue 2 有所不同。Vue 3 引入了 Composition API，可以使用 `<slot>` 元素来创建插槽。

首先，在父组件中，你可以通过在模板中使用 `<slot>` 元素来指定插槽的位置。例如：

<template>
  <div>
    <h1>父组件</h1>
    <slot></slot> <!-- 这是默认插槽 -->
  </div>
</template>

接下来，在子组件中，你可以在模板中使用 `<template>` 元素来标识插槽的位置，并通过 `v-slot` 指令来命名插槽。例如：

<template>
  <div>
    <h2>子组件</h2>
    <slot></slot> <!-- 默认插槽 -->
    <template v-slot:header>
      <h3>这是头部插槽</h3>
    </template>
    <template v-slot:footer>
      <h3>这是尾部插槽</h3>
    </template>
  </div>
</template>

最后，在父组件中，你可以在使用子组件的地方，通过向子组件的标签中添加内容来填充插槽。例如：

<template>
  <div>
    <parent-component>
      <h2>插入默认插槽的内容</h2>
    </parent-component>

    <parent-component>
      <template #header>
        <h3>替换头部插槽的内容</h3>
      </template>
      <template #footer>
        <h3>替换尾部插槽的内容</h3>
      </template>
    </parent-component>
  </div>
</template>

注意，使用 `v-slot` 指令命名插槽时，可以使用简写的 `#` 符号。例如：`<template #header>` 等同于 `<template v-slot:header>`。

这就是在 Vue 3 中如何使用插槽的方法。希望能帮到你！