vue3 父子组件怎么使用具名插槽

在 Vue 3 中，父子组件使用具名插槽的方式与 Vue 2 中基本相同。

1. 在父组件中，使用 `<template>` 标签定义具名插槽，如：

<template #header>
  <h1>这是头部</h1>
</template>

2. 在子组件中，使用 `<slot>` 标签定义具名插槽的位置，如：

<div>
  <slot name="header"></slot>
  <p>这是正文</p>
  <slot name="footer"></slot>
</div>

在上述代码中，`<slot>` 标签中的 `name` 属性指定了插槽的名称，此处分别定义了名为 `header` 和 `footer` 的具名插槽。

3. 在父组件中，使用子组件时，通过 `v-slot` 指令将具名插槽内容传递给子组件，如：

<ChildComponent>
  <template #header>
    <h1>自定义的头部</h1>
  </template>
  <template #footer>
    <p>自定义的底部</p>
  </template>
</ChildComponent>

在上述代码中，`<ChildComponent>` 组件中定义了 `header` 和 `footer` 两个具名插槽，通过 `v-slot` 指令可以将自定义内容传递给子组件。

注意：在 Vue 3 中，可以使用 `#` 替代 `v-slot`，如：

<ChildComponent>
  <template #header>
    <h1>自定义的头部</h1>
  </template>
  <template #footer>
    <p>自定义的底部</p>
  </template>
</ChildComponent>

以上就是 Vue 3 中父子组件使用具名插槽的基本流程。