Vue 3组件中能否重复使用同一具名插槽？

核心结论 #

在Vue 3中，完全支持重复使用同一具名插槽，你提供的写法是可行的；但Vue 2不支持该特性，同一具名插槽只会渲染最后一个实例的内容。

Vue 3 实现方式 #

Vue 3的$slots会将同一具名的所有插槽内容以数组形式存储，你可以在Section组件内部遍历这个数组来渲染所有subsection区块，同时兼顾默认插槽（main content）和footer插槽的渲染：

<template>
  <div class="section-container">
    <!-- 渲染默认插槽（主内容） -->
    <slot></slot>

    <!-- 批量渲染所有subsection插槽 -->
    <div class="subsection-wrapper">
      <slot 
        name="subsection" 
        v-for="(slotContent, idx) in $slots.subsection" 
        :key="idx"
      ></slot>
    </div>

    <!-- 渲染footer插槽 -->
    <div class="section-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style scoped>
.section-container {
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.subsection-wrapper {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
  text-align: right;
}
</style>

这样你就能直接使用提问中的写法，在父组件里统一控制subsection的样式，无需嵌套额外子组件。

Vue 2 替代方案 #

如果你的项目基于Vue 2，无法直接复用具名插槽，可以采用以下两种替代方案：

• 方案一：作用域插槽+循环
  父组件通过循环传递标识，组件内部根据标识渲染对应内容：

  <Section>
    <!-- 主内容 -->
    <template #subsection="{ item }" v-for="item in subsections" :key="item.id">
      <div v-if="item.id === 1">subsection 1</div>
      <div v-else>subsection 2</div>
    </template>
    <template #footer>footer content</template>
  </Section>
  

  组件内部需要定义subsections数组或接收父组件传递的列表数据。

• 方案二：动态命名插槽
  使用subsection-1、subsection-2这类带后缀的插槽名，组件内部通过遍历匹配的插槽名来渲染：

  <template>
    <div class="section-container">
      <slot></slot>
      <div class="subsection-wrapper">
        <template v-for="(slot, name) in $slots" :key="name">
          <slot :name="name" v-if="name.startsWith('subsection-')"></slot>
        </template>
      </div>
      <slot name="footer"></slot>
    </div>
  </template>
  

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