Vue3中能否将组件插槽内容封装为独立组件？

报错原因很明确：v-slot必须直接属于对应的自定义组件（这里就是ComponentA），ComponentB作为独立组件，它的模板里的v-slot没有绑定到任何宿主组件，所以会触发错误。在不能修改ComponentA的前提下，有两种可行的实现方式：

方法一：用渲染函数实现ComponentB（推荐） #

这种方法不需要修改父组件的写法，完全符合你想要的结构。ComponentB通过渲染函数生成带有插槽标识的模板节点，这些节点会被ComponentA识别为对应插槽的内容：

<script setup>
import { h } from 'vue'

const renderSlots = () => [
  // 生成label插槽的内容模板
  h('template', { slot: 'label' }, 'label'),
  // 生成默认插槽的内容模板
  h('template', { slot: 'default' }, 'content')
]
</script>

<template>
  <component :is="renderSlots" />
</template>

此时父组件的写法完全符合你的需求：

<template>
  <ComponentA>
    <ComponentB />
  </ComponentA>
</template>

方法二：Vue3.3+利用v-slots实现（适合需要定制内容的场景） #

如果需要ComponentB的插槽内容支持定制，可以先在ComponentB中定义自己的插槽，再在父组件中通过v-slots将其映射到ComponentA的插槽：

ComponentB代码：

<template>
  <template #label>
    <slot name="label">默认label</slot>
  </template>
  <template #default>
    <slot name="default">默认content</slot>
  </template>
</template>

父组件代码：

<template>
  <ComponentA v-slots="ComponentB.$slots">
    <ComponentB>
      <!-- 可选：自定义ComponentB的插槽内容 -->
      <template #label>自定义label</template>
      <template #default>自定义content</template>
    </ComponentB>
  </ComponentA>
</template>

这种方式适合需要灵活修改插槽内容的场景，但父组件需要额外添加v-slots绑定。

内容的提问来源于stack exchange，提问作者korion