一、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");
},