VUE事件总线eventbus

一、eventbus简介

    EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此Vue提供了更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次，所以我们使用eventbus一定要谨慎。

二、需要解决的问题

    在项目中遇到了问题，页面跳转之后新页面不刷新，之后首次加载才会加载页面，之后返回再跳转页面的数据都不在改变。逻辑是页面跳转会将参数带过去，新的页面会根据这个参数查询内容显示在页面上，如果之后不在重新刷新，那么页面显示的数据就不会发生变化。
    所以我需要再页面跳转之后重新调用加载表格数据的方法就可以，正好eventbus总线可以满足我的要求，我在页面跳转的方法发起一个事件，在新页面的 mounted方法（当页面加载完毕需要执行的方法）中接受并响应该事件，重新调用表格数据加载的方法，这样我的问题就可以解决了。

三、怎么用

（一） 创建 EventBus的js文件

//新建一个名为eventbus的 js 文件，在该文件添加如下代码
import Vue from 'vue'
export default new Vue;

（二）全局调用

在main.js中导入eventbus，然后将它挂载到vue的原型上

import bus from './utils/eventBus'
Vue.prototype.bus = bus;

（三）发送事件

在触发事件的地方发送事件，例如我在页面跳转的那里添加发送事件的代码

//clazzCourseCode为事件名
this.bus.$emit("clazzCourseCode");

（四）接收事件并响应

mounted() {
    //这里写方法调用，mounted(){}中的方法表示，当页面加载完毕需要执行的方法
    //bus总线响应事件--事件名需相同
    this.bus.$on("clazzCourseCode", () => {
    //加载表格数据的方法
      this.queryMember();
    });
  },

（五）解绑事件

 beforeDestroy() {
    //组件销毁前需要解绑事件。否则会出现重复触发事件的问题
    this.bus.$off("clazzCourseCode");
  },