vue3中mitt.js使用

在vue2中我们通过事件总线eventbus,来实现两个平行组件之间的通信：

bus.js

import Vue from 'vue'
// 创建vue实例
const Bus = new Vue()
export default Bus

在具体的组件中：
A.vue

import Bus from './bus.js'
// 发布一个事件
Bus.$emit('sendData', {name: 'Jack',age: 20})

B.vue

import Bus from './bus.js'
// 订阅一个事件
Bus.on('sendData', (param) => {console.log(param)
})

main.js vue入口文件, 或者直接将bus实例挂在在vue的原型上：

import Vue from 'vue'
const Bus = new Vue()
Vue.prototype.$Bus = Bus

// 直接使用this调用
this.$Bus.on('foo', e => console.log(e))
this.$Bus.emit('foo', {a: b})

那么，在vue3我们也可以通过mitt.js来实现两个平行组件之间的通信
首先安装：npm install --save mitt
在项目src目录下新建一个

mitt.js

文件

import mitt from 'mitt'
// 创建mitt实例
const emitter = mitt()
// 导出
export default emitter

在具体的组件实例中：
A.vue

import emitter from '@/mitt.js'
// 发布一个事件,并传递参数
emitter.emit('sendData', {name: 'David', 'age': 20})

B.vue

import emitter from '@/mitt.js'
// 发布一个事件,并传递参数
emitter.on('sendData', (param) => {console.log(param)
})

// main.js
import emitter from '@/mitt.js'
app.config.globalProperties.$emitter = emitter

那么在vue3 setup 语法中：

const { getCurrentInstance } from 'vue'
const proxy = getCurrentInstance() // 返回vue的实例
proxy.$emitter.on('foo', e => console.log(e)) // 订阅事件
proxy.$emitter.emit('foo', {a: b}) // 发布事件

除此之外，mitt实例还有off(移除订阅)， all(订阅所有事件) mittjs github官网 可自行了解