vue3 事件总线mitt

一、前言

Vue2使用 EventBus 事件总线进行兄弟组件通信，而在Vue3中事件总线模式已经被移除，官方建议使用外部的、实现了事件触发器接口的库,例如 mitt 或 tiny-emitter。

二、什么是Mitt Vue

mitt Vue是一个基于Vue.js的事件总线库，可以用于不同组件之间的通信，又称为观察者模式，使得组件之间通信更加简洁高效。mitt Vue兼容性好，安装与使用都非常简便，广泛应用于Vue.js项目中。

三、优势

1、首先它足够小，仅有200bytes。

2、支持全部事件的监听和批量移除。（父子通信，兄弟通信都可，兼容vue2、vue3）

3、它还不依赖 Vue 实例，可以跨框架使用，React 或者 Vue，甚至 jQuery 项目都能使用同一套库。

四、mitt的API

// 创建mitt实例
mitt()
//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
emit(name,data) 
// 绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
on(name,callback) 
// 解绑事件，一个参数：name：需要解绑的方法名
off(name)

四、安装与使用

npm install mitt --save

在vue中

//监听foo时间，处理后面的行为
emitter.on('foo',e=>console.log('foo',e))
//发送foo行为，传递后面的数据
emitter.emit('foo',{a:'b'})

在utils/eventMitt.js中写入

import mitt from 'mitt'
export default mitt()


在A组件传递信息
import emitter from '@/utils/eventHub'
const currentDate = ref(new Date())
watch(currentDate, val => {
    emitter.emit('calendarChange', val)
})


在B组件中接受信息
import emitter from '@/utils/eventHub'
emitter.on('calendarChange', val => {
    getData(val)
})