VUE eventBus BUS

在vue项目中，兄弟组件或多层嵌套组件间的通讯，使用eventBus通信
eventBus可以在全局定义，实现全项目通讯，使用方法也很简单。

也可以自己建一个event-bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

A B页面同时引入

import { EventBus } from "@/utils/event-bus.js";

A组件触发事件 变更数据

    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息','来自A页面的消息1');
    }

B组件监听后处理

  mounted() {
    EventBus.$on("aMsg", (msg,msg1) => {
      // A发送来的消息
      this.msg = msg+msg1;
    });
  }

使用方式：
1、初始化——全局定义
全局定义，可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.

//main.js
//方式一
Vue.prototype.$EventBus = new Vue();
//方式二
window.eventBus = new Vue();

2: 监听事件（直接放在组件的mounted声明周期内）

//使用方式一定义时
this.$EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})
//使用方式二定义时
EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})

 3:触发事件（放在method的具体触发方法内）

//使用方式一定义时
this.$EventBus.$emit('eventName', param1,param2,...)
//使用方式二定义时
EventBus.$emit('eventName', param1,param2,...)

4：移除监听事件（EventBus.$off('name'))为了避免在监听时，事件被反复触发，通常需要在页面销毁时移除事件监听。或者在开发过程中，由于热更新，事件可能会被多次绑定监听，这时也需要移除事件监听。

//使用方式一定义时
this.$EventBus.$off('eventName');
//使用方式二定义时
EventBus.$off('eventName');