手摸手教你使用事件总线EventBus
EventBus:又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件。
EventBus事件总线。可以用来组件之间通信,类似于Vuex的功能,简单的可以分为$emit()发射与 $on()监听两个方法进行组件通信。具体使用方法如下:
全局使用的方法:
main.js文件中:
import Vue from 'vue'
// 注册全局事件总线 EventBus
Vue.prototype.EventBus = new Vue()
在组件中如何使用:
//发送
this.EventBus.$emit('sendMsg', data)
//接收
this.EventBus.$on('sendMsg', (msg) => {
console.log(msg)
})
不全局使用的方法:
可以在src写一个js文件,例如bus.js,里面这样写
import vue from 'vue';
export default new vue();
然后在组件中:
import EventBus from '../../bus.js'; //路径根据实际更改
//发送数组的组件内
EventBus.$emit('sendMsg', data); //在事件总线触发名为sendMsg的事件并且发送数据data;
//接受数据的总线内
EventBus.$on("sendMsg", (msg) => {
// 发送来的消息
console.log(msg);
})
注意:EventBus.$off('sendMsg') //可以移除应用内所有对此某个事件的监听。
EventBus.$off() 或者直接调用来移除所有事件频道,
//总之在vue组件销毁前一定要移除bus,不然会造成事件混乱且难以排查维护,
// 推荐在vue的beforeDestroy中对bus进行销毁
//当项目是中型或大型项目推荐使用vuex做统一状态管理,事件总线适用于特殊情况下的组件通信。