如何将命名模板从子组件home-page传递到祖父组件page-layout？

问题根源 #

Vue的插槽仅支持直接父子组件间传递，你的组件层级为 home-page → page（router-view）→ page-layout，home-page 的 nav 插槽无法直接跳过 page 组件传给 page-layout，必须通过中间层中转。

方法一：透传插槽（最直接） #

修改 page 组件代码，将路由组件（home-page）的 nav 插槽内容转发给 page-layout：

<!-- page组件代码 -->
<page-layout>
  <!-- 透传nav插槽：捕获路由组件的nav内容并传递给page-layout -->
  <template #nav>
    <router-view v-slot="{ Component }">
      <component :is="Component">
        <template #nav>
          <slot name="nav"></slot>
        </template>
      </component>
    </router-view>
  </template>
  <!-- 渲染页面主体内容 -->
  <router-view></router-view>
</page-layout>

这样 home-page 里的 nav 插槽内容会先被 page 组件捕获，再传递给 page-layout 的同名插槽。

方法二：用Provide/Inject跨层级传递 #

如果组件层级更深，或不想修改中间组件，可借助Vue的provide/inject机制传递插槽内容：

1. 修改 home-page 组件，提供插槽内容：

<template>
  <div>
    <template #nav>Nav menu</template>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      // 提供返回nav插槽的函数
      getNavSlot: () => this.$slots.nav
    }
  }
}
</script>

2. 修改 page-layout 组件，注入并渲染：

<template>
  <div>
    <!-- 渲染注入的nav插槽内容 -->
    <component :is="getNavSlot()"></component>
  </div>
</template>

<script>
export default {
  inject: ['getNavSlot']
}
</script>

注意事项 #

• 方法一适合层级较少的场景，逻辑直观；
• 方法二更适配多层级组件传递，无需修改中间组件；
• 若使用Vue 3，语法会有细微差异（如$slots的调用方式、provide/inject的组合式API写法），但核心逻辑一致。

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