开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
组件通信
关于组件间的通信真的是非常常见的场景，通信有很种形式，大致可以归纳为以下几类：
- 父子组件之间
- 兄弟组件之间
- 祖先后代组件之间
- 任意组件之间
具体可使用的通信方法，包括但不限于：父子间传递 props / emit、找共同的祖辈 parent / root、依赖注入 inject / provide、事件总线 eventBus、vuex 等等...
关于 Vue3 中父子组件的传值可以参考前面的文章： Vue进阶 | Vue3 setup 语法糖中实现父子组件传参
非父子组件通信
非父子组件包括兄弟组件传参、祖先后代传参，Vue3 和 Vue2 的实现方式有所不同，并且Vue3 移除了 $on、$off、$once 等方法，Vue3 中非父子组件之间的传值方式如下：
- 子1->父，父->子2（如果两个组件有共同的父类）
- vuex
- mitt （使用
EventBus（事件总线））
接下来，使用 mitt 来进非父子组件通信
mitt
特点
- 轻量级
- 可以批量移除对事件的监听
- 不依赖具体的框架
安装
npm install --save mitt
实例化
新建一个 eventBus.js（或.ts）文件，实例化 mitt 并导出
import mitt from 'mitt'
const event = mitt();
export default event;
或者可以在全局进行挂载：
import mitt from "mitt"
const app = createApp(App)
app.config.globalProperties.$eventEmitter = new mitt()
此时的页面结构是这样的：
使用
如果未挂载到全局，需要在页面进行引入：
import eventEmitter from '@/.../eventBus'
之后就可以进行事件的操作了，具体如下：
-
发送事件及数据：
emit 用来注册事件，包含两个参数：
eventEmitter.emit('myEvent','需要传递的数据');
-
接收事件及数据
eventEmitter.on('myEvent',data => {
console.log(data); // 接收其他组件传递过来的数据
})
-
移除事件
eventEmitter.off('myEvent');
-
清除全部
eventEmitter.all.clear()
注：关于Typescript 的使用方式，可以参考 mitt 的 github
