Vue页面配置layout属性引入布局组件时具名插槽不显示问题

核心问题 #

你用到的layout配置项并非Vue原生支持的配置，是你所使用的上层框架（如Nuxt、项目自定义路由布局注入逻辑）额外封装的能力。这类通用布局注入逻辑默认只会处理默认插槽的内容透传，不会自动收集页面模板里写的具名插槽内容传递给布局组件，所以会出现默认插槽正常渲染、header具名插槽不显示的问题。
同时你在页面模板中使用了<my-layout>组件，但没有在components选项中注册，本身就不符合Vue组件的标准使用规范，当前能部分运行完全依赖自定义逻辑的兼容，出现异常属于预期内的情况。

额外注意点 #

你的MyLayout.vue模板存在多根节点问题，如果是Vue2环境会直接报错，建议统一套一层根节点：

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

可行方案 #

• 最优方案：按照Vue标准组件用法，将MyLayout注册到页面的components选项中使用，就是你当前测试可正常运行的写法，无兼容问题，稳定性最高。
• 如果你必须保留layout配置项的使用方式，需要自行修改项目中布局注入的逻辑，在渲染布局组件时手动收集页面的所有插槽内容（含具名插槽）透传给布局组件，改造成本较高，不推荐。

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