Nuxt3中不使用emit实现深层子组件向所有父组件传值

针对你的组件层级（Layout包含Header、Main（对应pages/index.vue）、Footer），要把pages/index.vue里的响应式变量传给Layout、Header、Footer且不使用emit，可以用以下几种方案：

方案1：Provide/Inject 跨层级共享 #

Vue的provide/inject不仅能父传子，也可以通过传递响应式变量+修改函数实现反向的状态同步，适合跨少量层级的场景：

1. 在pages/index.vue中提供状态和修改方法：

<script setup>
import { ref, provide } from 'vue'

const data = ref(false)

// 把变量和修改逻辑一起提供出去
provide('sharedPageData', {
  data,
  updateData: (val) => {
    data.value = val
  }
})
</script>

2. 在Layout、Header、Footer中注入并使用：

<script setup>
import { inject } from 'vue'

const sharedData = inject('sharedPageData')
// 读取状态：sharedData.data.value
// 修改状态：sharedData.updateData(true)
</script>

这样三个父组件都能实时获取pages/index.vue中data的变化，也能主动修改它。

方案2：全局状态管理（Pinia/Vuex） #

如果这个变量需要在更多组件中复用，全局状态管理是更省心的选择，以Pinia为例：

1. 创建共享Store：

// stores/pageStore.js
import { defineStore } from 'pinia'

export const usePageStore = defineStore('page', {
  state: () => ({
    pageData: false
  }),
  actions: {
    setPageData(val) {
      this.pageData = val
    }
  }
})

2. 在pages/index.vue中使用并更新状态：

<script setup>
import { usePageStore } from '@/stores/pageStore'

const pageStore = usePageStore()
// 直接修改状态
pageStore.setPageData(true)
// 或者直接赋值：pageStore.pageData = true
</script>

3. 在Layout、Header、Footer中获取响应式状态：

<script setup>
import { usePageStore } from '@/stores/pageStore'
import { storeToRefs } from 'pinia'

const pageStore = usePageStore()
// 转为响应式ref，确保组件能实时响应变化
const { pageData } = storeToRefs(pageStore)
</script>

所有组件都会自动同步状态，无需手动传递。

方案3：自定义v-model（仅适用于直接父子层级） #

如果Layout是直接包裹pages/index.vue的父组件，可以通过自定义v-model实现双向绑定，适合层级简单的场景：

1. 在Layout组件中处理v-model的props和事件：

<script setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <!-- 把状态传给Header、Footer -->
  <Header :page-data="modelValue" />
  <!-- 通过slot把状态和更新方法传给子组件 -->
  <slot 
    :page-data="modelValue" 
    @update:page-data="emit('update:modelValue', $event)" 
  />
  <Footer :page-data="modelValue" />
</template>

2. 在pages/index.vue中绑定v-model：

<script setup>
import { ref } from 'vue'

const data = ref(false)
</script>

<template>
  <Layout v-model="data">
    <!-- 页面内容 -->
  </Layout>
</template>

这种方法需要Layout配合处理状态传递，适合直接父子层级的场景。

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