Vue事件总线(eventBus)$on()会多次触发解决办法
2024-10-19 17:23:56
项目中使用了事件总线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
最新文章
- 【Sorting Collection】
- ASP.NET API(MVC) 对APP接口(Json格式)接收数据与返回数据的统一管理
- SpringMVC+Freemarker+JSTL支持
- 一天天的sql总结
- J. Bottles 二维费用背包问题
- script是什么
- 中断——中断描述符表的定义和初始化(二) (基于3.16-rc4)
- selenium 远程调用浏览器
- swift 进阶笔记 (一) —— 可选型
- 妙味课堂:JavaScript初级--第11课:字符串、查找高亮显示
- Jenkins配置Gogs webhook插件
- UNIX网络编程——揭开网络编程常见API的面纱【上】
- JQ 实现轮播图(3D旋转图片轮播效果)
- c++注意易错点
- 解决Kubelet Pod启动CreatePodSandbox或RunPodSandbox异常方法
- $q的基本用法
- python第五十二天---第九周作业 类 Fabric 主机管理程序
- AWVS扫描工具使用教程
- Luogu 3953[NOIP2017] 逛公园 堆优化dijkstra + 记忆化搜索
- 【AHOI2006】基因匹配