首页 > 其他 > 详细

Vue事件总线(eventBus)$on()会多次触发解决办法

时间:2018-11-16 16:46:05      阅读:428      评论:0      收藏:0      [点我收藏+]

项目中使用了事件总线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

Vue事件总线(eventBus)$on()会多次触发解决办法

原文:https://www.cnblogs.com/FineDay/p/9969652.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!