一文读懂 Vue 组件间通信机制（含 Vue2 / Vue3 区别）

一、组件间通信的概念

在 Vue 中，组件（Component） 是最核心的概念之一。每个 .vue 文件都可以视为一个独立的组件。
而 通信（Communication） 是指一个组件如何将信息传递给另一个组件。

通俗地说：

例如：当我们使用 UI 框架中的 table 组件时，需要向它传入 data 数据，这个“传值”的过程本质上就是一种组件通信。

二、组件间通信解决了什么问题？

在实际开发中，每个组件都有自己的作用域，数据默认是相互隔离的。但我们经常希望：

• 父组件能把数据传给子组件；
• 子组件能向父组件反馈事件或数据；
• 两个兄弟组件能共享状态；
• 甚至是跨层级（祖孙、非亲缘）组件之间的数据共享。

这正是组件通信的意义所在：

三、组件间通信的分类

按照组件关系，通信可分为以下几种：

1. 父子组件通信
2. 兄弟组件通信
3. 祖孙组件通信
4. 非关系组件通信

简单关系图如下：

Parent
 ├── Child A
 └── Child B
      └── GrandChild

四、Vue 中 8 种常见通信方案

下面是 Vue2 / Vue3 通用的 8 种通信方式，并在最后补充两者的区别。

1. props 传递数据（父 → 子）

适用场景： 父组件向子组件传值。

子组件定义：

export default {
  props: {
    name: String,
    age: {
      type: Number,
      default: 18,
      required: true
    }
  }
}

父组件使用：

<Child name="Jack" :age="18" />

Vue3 区别：
Vue3 支持在 <script setup> 中使用 defineProps：

const props = defineProps({
  name: String,
  age: Number
})

2. $emit 触发自定义事件（子 → 父）

适用场景： 子组件向父组件传递数据或事件。

子组件：

this.$emit('add', good)

父组件：

<Child @add="cartAdd($event)" />

Vue3 区别：
Vue3 使用 defineEmits：

const emit = defineEmits(['add'])
emit('add', good)

3. ref 获取子组件实例（父 → 子）

适用场景： 父组件想直接访问子组件实例或方法。

父组件：

<Child ref="foo" />

this.$refs.foo.someMethod()

Vue3 区别：
Vue3 的 ref 通过 setup 中的 ref() 引用，访问方式为 childRef.value。

4. EventBus 事件总线（兄弟组件）

适用场景： 兄弟组件之间传值。

Bus.js：

import Vue from 'vue'
export const Bus = new Vue()

发送方：

Bus.$emit('foo', data)

接收方：

Bus.$on('foo', (data) => { console.log(data) })

Vue3 区别：
Vue3 没有 $on/$off，可用第三方库（如 mitt）实现轻量事件总线：

import mitt from 'mitt'
export const bus = mitt()

bus.emit('foo', data)
bus.on('foo', handler)

5. $parent\mathrm{/}$root（祖辈 → 后代）

适用场景： 通过组件实例树访问父组件或根组件方法。

this.$parent.someMethod()
this.$root.globalFn()

Vue3 区别：
仍可用，但在 Composition API 下不推荐，应优先使用 provide/inject。

6. $attrs\text{与}$listeners（祖先 → 子孙）

适用场景： 批量向下传递属性与事件。

<!-- Parent.vue -->
<Child2 msg="hello" @some-event="handleEvent" />

<!-- Child2.vue -->
<Grandson v-bind="$attrs" v-on="$listeners" />

<!-- Grandson.vue -->
<div @click="$emit('some-event', 'from grandson')">
  {{ msg }}
</div>

Vue3 区别：
Vue3 将 $listeners 合并入 $attrs，事件监听器自动包含其中：

<Grandson v-bind="$attrs" />

7. Provide / Inject（祖孙通信）

适用场景： 祖先组件向任意深度的后代组件传递数据。

祖先组件：

provide() {
  return {
    foo: 'foo'
  }
}

后代组件：

inject: ['foo']

Vue3 区别：
Vue3 使用 Composition API：

// 祖先
import { provide } from 'vue'
provide('foo', 'foo')

// 后代
import { inject } from 'vue'
const foo = inject('foo')

8. Vuex（或 Pinia）（全局状态管理）

适用场景： 复杂组件关系、跨层级状态共享。

Vuex 核心概念：

• state：存放共享状态；
• getters：相当于计算属性；
• mutations：同步修改 state；
• actions：支持异步逻辑；
• modules：模块化管理。

Vue3 推荐：
Vue 官方推荐使用 Pinia，API 更简洁、类型友好。

五、通信方式选择建议

六、小结

• 父子通信： 使用 props 和 $emit 最简洁，也可用 ref。
• 兄弟通信： 推荐 EventBus 或 mitt。
• 祖孙通信： 用 provide / inject 最优雅。
• 全局通信： 使用 Vuex（Vue2）或 Pinia（Vue3）。
• Vue3 提升点： Composition API 让通信更灵活，逻辑更集中。

总结一句话：

本文内容由人工智能生成，仅供学习与参考使用，请在实际应用中结合自身情况进行判断。