Vue事件总线（eventBus）$on()会多次触发解决办法(示例代码)_136.la

简介  这篇文章主要介绍了Vue事件总线（eventBus）$on()会多次触发解决办法(示例代码)以及相关的经验技巧，文章约898字，浏览量319，点赞数4，值得参考！

项目中使用了事件总线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 跳坑的办法

vue中eventbus 多次触发的问题

Android事件总线 浅谈 EventBus(示例代码)

EventBus 事件总线模式实例(发布/订阅事件)

C# 事件总线 EventBus(示例代码)

原网址: 访问
创建于: 2021-01-21 15:37:37
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论