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 ...
随机推荐
- 安装最新版RabbitMQ v3.7.13 以及基本配置
之前用的老版本,新项目新气象,RabbitMQ也用最新版吧 首先打开官网:http://www.rabbitmq.com/install-rpm.html 先到右侧导航栏来看一下 : 第一个红框是指的 ...
- Asp.Net Nuget常用命令
1.安装 Install-Package EntityFramework //ef Install-Package EntityFramework.zh-Hans //ef中文
- 用VSCode写Vue要用到的配置
[本文出自天外归云的博客园] 文件-首选项-设置-打开settings.json-用户设置区域填写: { "workbench.colorTheme": "Monokai ...
- IMAP 读取含有附件邮件超慢问题
添加以下配置: Properties props = new Properties(); props.setProperty("mail.imap.partialfetch", & ...
- .NET Core 2.0 获取完整的URL
在之前的ASP.NET中,可以通过 Request.Url.AbsoluteUri 获取,但在ASP.NET Core没有这个实现,请问如何获取呢? 方法一:先引用“using Microsoft.A ...
- C语言 结构体中的零长度数组
/* C语言零长度数组大小和取值问题 */ #include <stdio.h> #include <stdlib.h> #include <string.h> s ...
- oneNote2016代码高亮插件
下载地址:https://github.com/elvirbrk/NoteHighlight2016/releases 安装插件前必须安装oneNote笔记. NoteHighlight插件有32位和 ...
- redis服务器学习一
一:什么是redis服务器 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zs ...
- [hbase] hbase 基础使用
一.准备 hadoop 2.8.0 (提前配置好) hbase 1.2.6 zookeeper 3.4.9 (配置完成) jdk1.8 hadoop 集群信息: zk集群: 二.安装配置 1.下载(官 ...
- 23命令模式Command
一.什么是命令模式 Command模式也叫命令模式 ,是行为设计模 式的一种.Command模式通过被称为 Command的类封装了对目标对象的调用行为以及调用参数. 二.命令模式的应用场景 在面向对 ...