如何解决渲染树中存在重复default插槽的报错问题？

嘿，这个报错我之前踩过坑，太懂这种困惑了😅！先给你拆解下问题，再给你对应解决方案：

为啥会报这个错？ #

Vue 里的默认插槽（也就是没写name的<slot>）是匿名的，同一个渲染树里不能重复渲染它——因为Vue根本搞不清你重复放的这些默认插槽到底对应父组件里哪一段内容，自然就会抛出Duplicate presence of slot "default"的报错。

关于作用域插槽的误解 #

你以为作用域插槽只适合搭配v-for用？其实不完全对！作用域插槽的核心能力是让子组件可以把数据传递给父组件，同时父组件能自定义渲染内容，v-for只是它的常见场景之一。不过如果你的需求只是「在子组件里多次复用父组件的同一段静态带标记内容」，其实用具名插槽会更直接简单，当然作用域插槽也能实现，下面给你分别讲两种方案：

方案1：具名插槽（优先推荐，适合静态内容复用） #

这是最直接的解决方式，给你的复用内容起个名字，子组件里就可以反复引用它：

父组件代码

<template>
  <ChildComponent>
    <!-- 把要复用的内容放到具名插槽里，比如叫reusable-content -->
    <template #reusable-content>
      <!-- 这里是你的静态带标记内容，举个例子： -->
      <div class="tagged-box">
        <span class="tag">置顶标记</span>
        这是我要在子组件里多次复用的静态内容
      </div>
    </template>
  </ChildComponent>
</template>

子组件代码

<template>
  <div class="child-wrapper">
    <!-- 想放几次就放几次，每次引用具名插槽即可 -->
    <div class="section-1">
      <slot name="reusable-content"></slot>
    </div>
    <div class="section-2">
      <slot name="reusable-content"></slot>
    </div>
    <div class="section-3">
      <slot name="reusable-content"></slot>
    </div>
  </div>
</template>

这样每个插槽都有明确的名字，Vue能精准识别，自然不会报错了。

方案2：作用域插槽（适合需要子组件传数据的场景） #

如果之后你的复用内容需要结合子组件的动态数据（比如子组件里的状态、接口返回值），那作用域插槽就派上用场了。哪怕暂时不需要传数据，也能用来实现复用：

子组件代码

<template>
  <div class="child-wrapper">
    <!-- 定义作用域插槽，这里可以传需要给父组件的数据，比如空对象或者实际数据 -->
    <div class="section-1">
      <slot name="scoped-reusable" :sectionData="section1Data"></slot>
    </div>
    <div class="section-2">
      <slot name="scoped-reusable" :sectionData="section2Data"></slot>
    </div>
  </div>
</template>

<script setup>
// 子组件的动态数据示例
const section1Data = { title: "第一区块" }
const section2Data = { title: "第二区块" }
</script>

父组件代码

<template>
  <ChildComponent>
    <!-- 接收子组件传来的数据，自定义渲染内容 -->
    <template #scoped-reusable="{ sectionData }">
      <div class="tagged-box">
        <span class="tag">{{ sectionData.title }}标记</span>
        复用内容，可以结合子组件数据动态渲染
      </div>
    </template>
  </ChildComponent>
</template>

总结一下 #

• 单纯复用静态内容：直接用具名插槽，简单高效，完全能解决你的报错问题
• 复用内容需要结合子组件动态数据：用作用域插槽更合适，它的能力远不止搭配v-for哦

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