Vue的事件总线
原本存在直接相关的父子组件之间进行数据的交互,但是对于组件之间没有直接的,如何进行数据交互呢?
事件总线和Vuex的区别在于:Vuex是对状态进行管理的而事件总线是对事件进行管理的。
提供了一个全局事件中心,并将其注如每个组件中,像内置的事件流一样方便的使用全局事件
工作原理就是使用发布/订阅方式
1.事件总线的创建
import Vue from 'vue' export const EventBus = new Vue()
创建一个全局的事件总线
// main.js Vue.prototype.$EventBus = new Vue()
2.发送消息
EventBus.$emit("aMsg", '来自A页面的消息'); //A发送消息给B
3.监听接收消息
EventBus.$on("aMsg", (msg) => {// A发送来的消息
this.msg = msg; //B监听接收到A的消息就是msg数据
});
4.移除事件
EventBus.$off('aMsg', {})
在Vue项目中创建一个EventBus,事件总线
var EventBus = new Vue(); //事件总线据是一个全局的原型对象中的属性对象 Object.defineProperties(Vue.prototype, { $bus: { get: function () { return EventBus } } })
this.$bus.$emit('nameOfEvent', { ... pass some event data ...}); //调用原型属性进行数据发送和监听 this.$bus.$on('nameOfEvent',($event) => { // ... })