Inertia Vue3技术问询：子布局向父/祖父布局传递值的实现

针对你的需求，Vue 3的provide/inject API是最佳选择——它允许跨层级组件传递数据，无需中间组件显式传递props，完美适配"Layout1不直接引用Layout2、Layout2不直接引用Layout3"的约束。

修改后的完整代码示例 #

Layout 3（最内层，提供数据）

<template>
    <Layout2>
          <p>Languages</p>
    </Layout2>
</template>
<script setup>
import Layout2 from '@/Shared/Layouts/Layout2.vue';
import { provide } from 'vue';

// 提供需要传递给上层布局的数据
// 如果需要响应式数据，替换为 ref('你的标题') 即可
provide('heading', '来自Layout3的主标题');
provide('sub_heading', '来自Layout3的副标题');
</script>

Layout 2（中间层，接收副标题）

<template>
    <Layout1>
        <h3>{{ sub_heading }}</h3>
        <slot />
    </Layout1>
</template>
<script setup>
import Layout1 from '@/Shared/Layouts/Layout1.vue';
import { inject } from 'vue';

// 注入Layout3提供的副标题
const sub_heading = inject('sub_heading');
</script>

Layout 1（最外层，接收主标题）

<template>
    <h2>{{ heading }}</h2>
    <slot />
</template>
<script setup>
import { inject } from 'vue';

// 直接注入Layout3提供的主标题，无需依赖Layout2传递props
const heading = inject('heading');
</script>

关键说明 #

1. Provide/Inject的作用：provide在最内层组件（Layout3）定义要共享的数据，inject在任意上层组件（Layout1、Layout2）直接获取数据，跳过中间组件的props传递。
2. 响应式支持：如果需要动态更新标题，只需在Layout3中使用响应式变量：

   import { provide, ref } from 'vue';
   const heading = ref('初始主标题');
   provide('heading', heading);
   // 后续修改heading.value时，Layout1的标题会自动更新
   

3. 约束满足：Layout1无需引用Layout2、Layout2无需引用Layout3，完全符合你的布局动态性要求。

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