Vue3 事件总线mitt使用总结

---

一、安装 mitt

npm i mitt -s

二、三个常用接口

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

三、Vue3中引入

main.js 中

// main.js
import mitt from 'mitt'
import {App} from './App'
​
const app = createApp(App)
app.config.globalProperties.Bus = mitt()
...

四、其他组件中使用

组件A、B

import { getCurrentInstance } from 'vue'
// 获取到 全局事件总线
const {Bus}  = getCurrentInstance().appContext.config.globalProperties 

4-1 传递

组件A

// A.vue
Bus.emit('callback', data)

4-2 接收

组件B

// B.vue
Bus.on('callback', (res)=>{
	// res 就是emit传过来的数据
	})