Vue 事件总线的使用

Vue 事件总线的使用 一、Vue2.0 版本二、Vue3.0版本三、事件总线的使用四、总结

前言

在vue中使用事件总线可以省去很多组件间通信的麻烦，例如可能会出现的子传父，父再传子的多个传递过程。事件总线使用emit进行广播，然后某个组件进行监听，就达到通信的目的了

一、Vue2.0 版本

//main.js中
const app = createApp({})//正常的创建Vue实例
app.config.grobalProperties.$bus = createApp({})//创建事件总线

二、Vue3.0版本

首先安装第三方库mitt

npm install --save mitt

然后全局使用事件总线：

//main.js中
import {createApp} from "vue"
import App from './App.vue'
import mitt from "mitt"

const app = createApp(App);//正常配置
//挂载事务总线
app.config.globalProperties.$bus = new mitt()

三、事件总线的使用

在组件A中使用事务总线触发某个动作

this.$bus.emit('event',{data:'123'})

在组件B中监听动作的发生

在mounted中监听

mounted(){
	this.$bus.on("event",(msg)=>{
   		 console.log(msg.data);
    });
}

也可以在data()中监听

data(){
	this.$bus.on("event",(msg)=>{
   		 console.log(msg.data);
    });
    return{
    }
}

四、总结

问题：当Vue升级到3.0版本后，其创建方法改成了createApp({})，prototype属性也被取消了，因此无法使用之前Vue.prototype.$bus> = new Vue()的方式使用事务总线

解决方法：

Vue3.0版本中把$on、$off、$once等事件函数都去除掉了，只留下了$emit() 用于父子组件之间的沟通。

为了能够使用事务总线，除了$emit触发事件之外，还至少应该有$on监听函数。官方推荐使用第三方库mitt。

需要注意的是，这里的事务总线$bus的函数emit和on是来源于mitt,而不是vue,不需要使用$符号。

---

参考：
https://blog.csdn.net/xaishujin/article/details/109167375