Vue3祖孙组件通信方法总结

在 Vue 3 中，实现祖孙组件（跨越多层）通信主要有以下几种方式，按推荐程度排序：

1. Provide/Inject（推荐）

最标准的跨层级通信方案，祖先组件提供数据，后代组件注入使用。

vue 复制代码

<!-- 祖先组件 Grandparent.vue -->
<script setup>
import { provide, ref } from 'vue'

// 提供静态数据
provide('appTheme', 'dark')

// 提供响应式数据
const counter = ref(0)
provide('counter', counter)

// 提供方法
const updateCounter = (val) => { counter.value = val }
provide('updateFn', updateCounter)
</script>

vue 复制代码

<!-- 孙子组件 Grandchild.vue -->
<script setup>
import { inject } from 'vue'

// 注入数据（第二个参数是默认值）
const theme = inject('appTheme', 'light')
const counter = inject('counter')

// 注入方法
const updateCounter = inject('updateFn')
</script>

<template>
  <div :class="`theme-${theme}`">
    计数：{{ counter }}
    <button @click="updateCounter(5)">重置为5</button>
  </div>
</template>

2. 全局状态管理（Pinia/Vuex）

适合大型应用或需要全局共享的状态

ts 复制代码

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

vue 复制代码

<!-- 任意组件 -->
<script setup>
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()
</script>

<template>
  <button @click="store.increment">{{ store.count }}</button>
</template>

3. 事件总线（小型项目）

使用 mitt 或 tiny-emitter 库

ts 复制代码

// eventBus.js
import mitt from 'mitt'
export default mitt()

vue 复制代码

<!-- 祖先组件 -->
<script setup>
import eventBus from './eventBus'

const sendMessage = () => {
  eventBus.emit('grandchild-msg', { text: '来自祖父的消息' })
}
</script>

vue 复制代码

<!-- 孙子组件 -->
<script setup>
import eventBus from './eventBus'
import { onUnmounted } from 'vue'

const handler = (msg) => {
  console.log('收到消息:', msg)
}

eventBus.on('grandchild-msg', handler)

onUnmounted(() => {
  eventBus.off('grandchild-msg', handler)
})
</script>

4. 透传 Attributes（简单场景）

使用 v-bind="$attrs" 逐级传递

vue 复制代码

<!-- 祖先组件 -->
<Parent title="祖传标题" />

<!-- 中间组件 Parent.vue -->
<Child v-bind="$attrs" />

<!-- 孙子组件 Child.vue -->
<script setup>
defineProps(['title'])
</script>
<template>
  <h2>{{ title }}</h2>
</template>

5. 模板引用（特殊场景）

通过 ref 链获取组件实例

vue 复制代码

<!-- 祖先组件 -->
<script setup>
import { ref } from 'vue'

const childRef = ref(null)

const callGrandchild = () => {
  childRef.value?.grandchildRef?.someMethod()
}
</script>

<template>
  <Parent ref="childRef" />
</template>

<!-- 中间组件 Parent.vue -->
<Child ref="grandchildRef" />

⚠️ 不推荐方案

深层 Props 传递：导致中间组件需要冗余传递属性
直接修改父组件状态：破坏组件封装性
Vue2 的 EventBus ：Vue3 中已移除 $on/$off API

最佳实践建议：

优先使用 Provide/Inject - 官方推荐的标准方案
复杂数据流使用 Pinia（Vue3 官方状态库）
简单场景可使用 事件总线（mitt）
避免超过 3 层的 props 透传
对 Provide 的数据使用 readonly() 保持单向数据流

ts 复制代码

// 提供只读数据
import { readonly } from 'vue'

const data = reactive({ /* ... */ })
provide('readonlyData', readonly(data))

根据你的具体场景选择合适方案，中小型项目 Provide/Inject 通常是最佳选择，大型应用推荐 Pinia。