简介
Vue 3 引入了多种强大的功能和改进，其中包括增强的组件通信机制。了解这些机制对于构建复杂、可维护的应用程序至关重要。下面，我们将介绍在 Vue 3 中组件通信的几种方法。
通讯类型
- 父子组件通信
- 上下级通信（不仅父子级）
- 兄弟组件通信
- 全局组件通信
父子组件通信
父子组件通信是指，B 组件引入到 A 组件里渲染，此时 A 是 B 的父级；B 组件的一些数据需要从 A 组件拿，B 组件有时也要告知 A 组件一些数据变化情况。
他们之间的关系如下， Child.vue 是直接挂载在 Father.vue 下面：
# 父组件
Father.vue
│ # 子组件
└─Child.vue
常用的方法有：
| 方案 | 父组件向子组件 | 子组件向父组件 |
|---|---|---|
| props / emits | props | emits |
| v-model / emits | v-model | emits |
| ref / emits | ref | emits |
| provide / inject | provide | inject |
| EventBus | emit / on | emit / on |
| Reactive State | - | - |
| Vuex | - | - |
| Pinia | - | - |
上下级通信
顾名思义，上下级组件是比 父子组件通信要更深层次的引用关系（也有称之为 “隔代组件” ）。
C 组件被引入到 B 组件里， B 组件又被引入到 A 组件里渲染，此时 A 是 C 的爷爷级别（可能还有更多层级关系），它们之间的关系可以假设如下：
Grandfather.vue
└─Son.vue
└─Grandson.vue
可以看到 Grandson.vue 并非直接挂载在 Grandfather.vue 下面，他们之间还隔着至少一个 Son.vue （在实际业务中可能存在更多层级），如果使用 props ，只能一级组件一级组件传递下去，就太繁琐了。
Props 的多级传递会非常繁琐（摘自 Vue 官网）
因此需要更直接的通信方式来解决这种问题，这一 Part 就是讲一讲 C 和 A 之间的数据传递，常用的方法有：
| 方案 | 爷组件向孙组件 | 孙组件向爷组件 |
|---|---|---|
| provide / inject | provide | inject |
| EventBus | emit / on | emit / on |
| Reactive State | - | - |
| Vuex | - | - |
| Pinia | - | - |
因为上下级的关系的一致性，爷孙组件通信的方案也适用于 父子组件通信 ，只需要把爷孙关系换成父子关系即可，为了方便阅读，下面的爷组件统一叫 Grandfather.vue，子组件统一叫 Grandson.vue 。
兄弟组件通信
兄弟组件是指两个组件都挂载在同一个 Father.vue 下，但两个组件之间并没有什么直接的关联，先看看它们的关系：
Father.vue
├─Brother.vue
└─LittleBrother.vue
这种层级关系下，如果组件之间要进行通信，目前通常有这两类选择：
- 【不推荐】先把数据传给 Father.vue ，再使用父子组件通信方案处理
- 【推荐】借助 全局组件通信的方案达到目的
下面的内容将进入全局通信的讲解。
全局组件通信信)
全局组件通信是指项目下两个任意组件，不管是否有直接关联（例如父子关系、爷孙关系）都可以直接进行交流的通信方案。
举个例子，像下面这种项目结构， B2.vue 可以采用全局通信方案直接向 D2.vue 发起交流，而无需经过它们各自的父组件。
bash
A.vue
├─B1.vue
├───C1.vue
├─────D1.vue
├─────D2.vue
├───C2.vue
├─────D3.vue
└─B2.vue
常用的方法有：
| 方案 | 发起方 | 接收方 |
|---|---|---|
| EventBus | emit | on |
| Reactive State | - | - |
| Vuex | - | - |
| EventBus | emit | on |
| Reactive State | - | - |
| Vuex | - | - |
| Pinia | - | - |
