Vue事件总线(eventBus)$on()会多次触发解决办法
项目中使用了事件总线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()会多次触发解决办法的更多相关文章
- 当Vue可视化工具创建不了项目时的解决办法!
当Vue可视化工具创建不了项目时的解决办法! 当你尝试用可视化工具创建一个Vue的项目的时候,报错, 出现什么indexOf什么什么的错误! 我的解决办法是把可视化工具删除掉,重新下载! 如果你是 n ...
- 事件总线EventBus
什么是事件总线管理? 将事件放到队列里,用于管理和分发: 保证应用的各个部分之间高效的通信及数据,事件分发: 模块间解耦: 什么是EventBus? EventBus是发布/订阅的事件总线.Event ...
- ASP.NET Core基于微软微服务eShopOnContainer事件总线EventBus的实现
这个EventBus的实现是基于微软微服务https://github.com/dotnet-architecture/eShopOnContainers项目的,我把它从项目中抽离出来,打包成nuge ...
- Vue事件总线
一 项目结构 二 main.js import Vue from "vue"; import App from "./App.vue"; import Tool ...
- Guava: 事件总线EventBus
EventBus 直译过来就是事件总线,它使用发布订阅模式支持组件之间的通信,不需要显式地注册回调,比观察者模式更灵活,可用于替换Java中传统的事件监听模式,EventBus的作用就是解耦,它不是通 ...
- 【bird-java】分布式服务间的事件总线EventBus
什么是EventBusEventBus是对发布-订阅模式的一种实现.其以一种非常优雅的方式实现了组件间的解耦与通信,在Android开发.DDD等领域都有非常广泛的应用. 事件流大致如下: Produ ...
- 自己动手写事件总线(EventBus)
本文由云+社区发表 事件总线核心逻辑的实现. EventBus的作用 Android中存在各种通信场景,如Activity之间的跳转,Activity与Fragment以及其他组件之间的交互,以及在某 ...
- C# 事件总线 EventBus
1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集中式事件处理机制,允许不同的组件之间进行彼此通信而又不需 ...
- 事件总线 EventBus
661. .net中事件模型很优雅的实现了观察者模式,同时被大量的使用在各种框架中. [2016-04-30 10:52:42]662. Prism框架中实现了一个典型的EventAggregator ...
随机推荐
- C#反射实现 C# 反射 判断类的延伸类型 使用代码生成工具Database2Sharp快速生成工作流模块控制器和视图代码 C# ADO.NET的SqlDataReader对象,判断是否包含指定字段 页面中添加锚点的几种方式 .net 简单实用Log4net(多个日志配置文件) C# 常用小点
C#反射实现 一.反射概念: 1.概念: 反射,通俗的讲就是我们在只知道一个对象的内部而不了解内部结构的情况下,通过反射这个技术可以使我们明确这个对象的内部实现. 在.NET中,反射是重要的机制, ...
- Autohotkey window 下宏键盘、宏命令开发入门
- 【OCR技术系列之五】自然场景文本检测技术综述(CTPN, SegLink, EAST)
文字识别分为两个具体步骤:文字的检测和文字的识别,两者缺一不可,尤其是文字检测,是识别的前提条件,若文字都找不到,那何谈文字识别.今天我们首先来谈一下当今流行的文字检测技术有哪些. 文本检测不是一件简 ...
- mysql知识汇总
一.数据类型介绍 数据类型 字节长度 范围或用法 bigint 8 无符号[0,2^64-1],有符号[-2^63 ,2^63 -1] binary(M) M 类似Char的二进制存储,只包含byte ...
- halcon之 distance_transform
Compute the distance transformation of a region 该算子的作用是计算对region转换距离.该算子的形式为distance_transform(Reg ...
- flask wigs 服务器
Nginx:Hey,WSGI,我刚收到了一个请求,我需要你作些准备,然后由Flask来处理这个请求. WSGI:OK,Nginx.我会设置好环境变量,然后将这个请求传递给Flask处理. Flask: ...
- Google API Design Guide (谷歌API设计指南)中文版
面向资源的设计 这份设计指南的目标是帮助开发人员设计简单.一致.易用的网络API.同时,它也有助于收敛基于socket的API和(注:原文是with,这里翻译为“和”)基于HTTP的REST API. ...
- iOS - 解决 Cocoapods 第三方库下载不下来
Cocoapods 第三方库下载不下来问题:一些第三方的库由于网的原因下载不下里 (解决思路:(原理) cocoapods 下载的时候 会先从缓存中拿 缓存中没有再去下载 所以可以把下载不下来的放到缓 ...
- ubuntu anaconda opencv问题
在ubuntu16.04上使用opencv3时, 发现视频与imshow函数无法使用,经查资料发现 安装opencv时采用的简易的安装方法,没有编译opencv的源码. 因此会出现以上问题. 下载源码 ...
- Oracle密码过期问题 ORA-28001:the password has expired
如果已经过期了,首先需要修改密码,然后设置密码为无限期.修改以sys用户登陆. 修改密码:alter user username identified by password 密码可以和之前的密码相 ...