zoukankan      html  css  js  c++  java
  • Vue事件总线(eventBus)$on()会多次触发解决办法

    ------------------------更新于2020-4-26-----------------

    今天被这个东西搞死了,排查了一下午,才找到是这个问题,发现$on接收的回调调用了很多次。问题是这样的,这个界面生命周期里$on进行了接收,当快速的从这个界面跳转走,再跳转回来,来回数次,

    发现$on接收了数次,主要是我在beforeDestroy里进行了$off销毁,还是触发多次,挪到destroy里就行了,原因不详。

    ------------------------以下为原文-----------------------

    项目中使用了事件总线eventBus来进行两个组件间的通信,
    使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下:

    import Vue from 'vue'
    export default new Vue();
    在需要通信的两个组件中分别import

    import bus from "common/utils/eventBus";
    然后就可以通过emit、on进行通信:如下:

    一个组件中发射
    bus.$emit('SUBMITSEARCH_PEOPLE',this.searchContent)
    另一个组件中接收
    bus.$on('SUBMITSEARCH_PEOPLE', function (data) {...}

    其中可能会遇到一个坑是$on()会触发多次,具体原因跟生命周期有关,详细分析可参考:
    https://blog.csdn.net/chern1992/article/details/80392465

    解决办法就是在利用$on 接收事件的组件的beforeDestroy或destroy周期中将事件进行销毁,使用$off()

    beforeDestroy () {
      bus.$off('SUBMITSEARCH_PEOPLE')
    },

    附上github上Vue作者尤大大关于这问题的解答:
    https://github.com/vuejs/vue/issues/3399

  • 相关阅读:
    简单字典操作
    字符串操作
    2017年10月7日
    循环列表练习
    Zabbix4.0系统告警"Zabbix agent on Zabbix server is unreachable for 5 minutes"
    Zabbix4.0系统告警“Zabbix server is not running”
    FreeRADIUS使用了在Cisco IOS配置示例的管理访问
    Cisco AAA Configuration
    使用工具Csvde导出域中所有用户信息
    McAfee Agent卸载方法
  • 原文地址:https://www.cnblogs.com/wangxi01/p/12016176.html
Copyright © 2011-2022 走看看