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");
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值