是否可以在单个文件组件中使用v-slot？

Question

我正在使用vue3

组件A.vue

<template>
  <slot name="label"></slot>
  <slot></slot>
</template>

只需使用模板即可。

<template>
  <ComponentA>
    <template #label>
      label
    </template >
    <template #default>
      content
    </template >
  </ComponentA>
</template>

有什么办法可以将两个模板提取到一个组件中吗？ 喜欢

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

ComponentA 是库的组件，所以我无法修改它。

这不是工作。 v 槽必须由自定义元素拥有。

组件B.vue

<template>
  <template #label>
    label
  </template >
  <template #default>
    content
  </template >
</template>

Answer 1

根据我对你问题的理解： 是的，您可以将单文件组件传递到插槽中。 vue 文档中有一个示例，其中 FancyButton 是带有插槽的父组件，AwesomeIcon 是自定义单文件组件：https://vuejs.org/guide/components/slots

<FancyButton>
  <span style="color:red">Click me!</span>
  <AwesomeIcon name="plus" />
</FancyButton>

对于你的例子来说，它正是

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

其中 ComponentB 将位于 ComponentA 的默认槽中。当然，如果需要的话，ComponentB 可能有自己的插槽。

我没有检查过，但是如果你需要将组件传递到命名插槽中，则需要添加 v-slot:label，如标签中那样

<ComponentB v-slot:label/>

我可能是错的，但这就是我理解文档的方式。