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

  • 相关阅读:
    Centos 安装git
    mybatis 整合redis作为二级缓存
    jedis 连接池工具类
    IE8下使用asp.net core mvc+jquery ajaxSubmit问题
    .net core mvc部署到IIS导出Word 提示80070005拒绝访问
    IdentityServer4在Asp.Net Core中的应用(三)
    理解OpenID和OAuth的区别
    IdentityServer4在Asp.Net Core中的应用(二)
    使用Bind读取配置到C#的实例
    IdentityServer4在Asp.Net Core中的应用(一)
  • 原文地址:https://www.cnblogs.com/wangxi01/p/12016176.html
Copyright © 2011-2022 走看看