Vue具名插槽绑定失效求助：插槽内容无法正常显示

按照Vue官方文档的具名插槽示例实现代码后，在BaseLayer_0.vue中尝试为插槽命名，但使用v-slot或#绑定的具名插槽内容无法正常显示，出现重复输出的错误（见下方截图），以下是问题排查及解决方法：

涉及代码 #

App.vue #

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>

  <BaseLayer_0>
    <template #header>
      <h1>header</h1>
    </template>

    <template #default>
      <p>default</p>
    </template>

    <template #footer>
      <p>footer</p>
    </template>
  </BaseLayer_0>

</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import BaseLayer_0 from './components/BaseLayer_0.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    BaseLayer_0
  }
}
</script>

BaseLayer_0.vue（错误写法） #

<template>
  <div class="container">
    <header name="header">
        <slot></slot>
    </header>

    <main>
        <slot></slot>
    </main>

    <footer name="footer">
        <slot></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'BaseLayer_0'
}
</script>

错误输出截图 #

问题原因 #

你错误地将具名插槽的name属性添加到了<slot>的父元素（<header>、<footer>）上，而非<slot>标签本身。这导致所有<slot>都被识别为默认插槽，因此App.vue中所有插槽内容（header、default、footer）会被重复渲染到每个默认插槽中，最终出现三次重复输出的问题。

解决方法 #

修改BaseLayer_0.vue的代码，将name属性移至对应的<slot>标签上：

<template>
  <div class="container">
    <header>
        <slot name="header"></slot>
    </header>

    <main>
        <slot></slot> <!-- 默认插槽无需添加name属性 -->
    </main>

    <footer>
        <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'BaseLayer_0'
}
</script>

修改后，App.vue中通过#header、#default、#footer绑定的插槽内容会被正确渲染到对应的位置，不会再出现重复输出的问题。

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