zoukankan      html  css  js  c++  java
  • vue 事件总线eventBus的使用详解

    因为在自己的项目不需要类似Vuex这样的库来处理组件之间的数据通信,所以使用了事件总线存储了电话进线的数据,反复操作之后,导致内存暴涨,页面卡死,所以使用该方法的时候要特别注意,特此记录一下. 

    使用场景:非父组件通信时,可以向该中心注册发送事件或接收事件,需要的到总线取值就行

    注意点:该方法使用起来虽然方便,但EventBus 在监听的时候就会触发很多次,是一个非常大的隐患。一般在项目中会在vue页面销毁时,同时移除EventBus 事件监听.下面会给出发消息——接收消息——移除监听详细流程

    借鉴文章:https://my.oschina.net/u/2518341/blog/2960762

    1.在项目中新建event-bus.js

    const install = function (Vue) {
      const Bus = new Vue({
        methods: {
          emit(event, ...args) {
            this.$emit(event, ...args);
          },
          on(event, callback) {
            this.$on(event, callback);
          },
          off(event, callback) {
            this.$off(event, callback);
          }
        }
      });
      Vue.prototype.$EventBus = Bus;
    };
    export default install;
    

    2.mian.js 中引入

    import VueBus from './event-bus'
    Vue.use(VueBus);
    

    3.发送消息

    this.$EventBus.$on("aMsg", this.timerFun);
    methods: {
        timerFun () {
          this.timer = new Date().getTime()
        }
    }

    4.接收消息

     this.$EventBus.$on("aMsg", this.getWorkOrderListInfo);
    
     this.getWorkOrderListInfo是我自己页面写的方法
    

    5.移除监听

    强调:特别重要,切记一定要在vue页面销毁的时候移除监听的事件

     beforeDestroy () {
        this.$EventBus.off('aMsg', this.getWorkOrderListInfo);
      },
    

     文章如有不足,还望指教,谢谢

     

  • 相关阅读:
    限制次数登录系统
    1-10内的数字累加,输出和大于20的数字。
    输出某个年龄的人的比例
    计算100以内的所有偶数和
    计数器解决一个人数增长问题
    switch处理多分支结构
    if处理多分支结构
    webstom破解
    下拉框左右选择
    勾中行变色效果
  • 原文地址:https://www.cnblogs.com/cjechenjinge-0820/p/12982697.html
Copyright © 2011-2022 走看看