Vue 事件总线的使用
前言
在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