由于在vue3.0中移除了vue实例的$on(), $off()方法,所以,在vue3.0取而代之的是用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官网 可自行了解