项目中使用了事件总线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()会多次触发解决办法的更多相关文章

  1. 当Vue可视化工具创建不了项目时的解决办法!

    当Vue可视化工具创建不了项目时的解决办法! 当你尝试用可视化工具创建一个Vue的项目的时候,报错, 出现什么indexOf什么什么的错误! 我的解决办法是把可视化工具删除掉,重新下载! 如果你是 n ...

  2. 事件总线EventBus

    什么是事件总线管理? 将事件放到队列里,用于管理和分发: 保证应用的各个部分之间高效的通信及数据,事件分发: 模块间解耦: 什么是EventBus? EventBus是发布/订阅的事件总线.Event ...

  3. ASP.NET Core基于微软微服务eShopOnContainer事件总线EventBus的实现

    这个EventBus的实现是基于微软微服务https://github.com/dotnet-architecture/eShopOnContainers项目的,我把它从项目中抽离出来,打包成nuge ...

  4. Vue事件总线

    一 项目结构 二 main.js import Vue from "vue"; import App from "./App.vue"; import Tool ...

  5. Guava: 事件总线EventBus

    EventBus 直译过来就是事件总线,它使用发布订阅模式支持组件之间的通信,不需要显式地注册回调,比观察者模式更灵活,可用于替换Java中传统的事件监听模式,EventBus的作用就是解耦,它不是通 ...

  6. 【bird-java】分布式服务间的事件总线EventBus

    什么是EventBusEventBus是对发布-订阅模式的一种实现.其以一种非常优雅的方式实现了组件间的解耦与通信,在Android开发.DDD等领域都有非常广泛的应用. 事件流大致如下: Produ ...

  7. 自己动手写事件总线(EventBus)

    本文由云+社区发表 事件总线核心逻辑的实现. EventBus的作用 Android中存在各种通信场景,如Activity之间的跳转,Activity与Fragment以及其他组件之间的交互,以及在某 ...

  8. C# 事件总线 EventBus

    1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集中式事件处理机制,允许不同的组件之间进行彼此通信而又不需 ...

  9. 事件总线 EventBus

    661. .net中事件模型很优雅的实现了观察者模式,同时被大量的使用在各种框架中. [2016-04-30 10:52:42]662. Prism框架中实现了一个典型的EventAggregator ...

随机推荐

  1. from __future__ import unicode_literals

    为了适应Python 3.x的新的字符串的表示方法,在2.7版本的代码中,可以通过unicode_literals来使用Python 3.x的新的语法

  2. git变慢的原因

    最近使用git更新代码变慢,进一步试了一下提交代码.执行git命令都很慢,换了idea的工作目录.更换git版本,所有操作都是徒劳. 最后关了火绒杀毒软件,才快了起来. 坑坑坑坑坑的火绒杀毒!浪费我至 ...

  3. jetty9.4缓存文件目录自定义

    jetty9.4安装包解压之后,有几个修改的地方和jetty7.6有不同,需要单独注意一下: 1. 端口设置 端口设置在${jetty_home}/start.ini中 2. 缓存文件生成目录 项目通 ...

  4. SQL DCL 数据控制语句

    前言 DCL(Data Control Language)语句:数据控制语句,用于控制不同数据段直接的许可和访问级别的语句.这些语句定义了数据库.表.字段.用户的访问权限和安全级别.主要的语句关键字包 ...

  5. Spring钩子方法和钩子接口的使用详解

    本文转自:http://www.sohu.com/a/166804449_714863 前言 SpringFramework其实具有很高的扩展性,只是很少人喜欢挖掘那些扩展点,而且官方的Refrenc ...

  6. Tomcat中的backlog参数

    在linux 2.2以前,backlog大小包括了半连接状态和全连接状态两种队列大小.linux 2.2以后,分离为两个backlog来分别限制半连接SYN_RCVD状态的未完成连接队列大小跟全连接E ...

  7. 04Hadoop中的setPartitionerClass/SortComparator/GroupingComparator问题

    map阶段 1. 使用job.setInputFormatClass(TextInputFormat)做为输入格式.注意输出应该符合自定义Map中定义的输出. 2. 进入Mapper的map()方法, ...

  8. MySql快速插入以及批量更新

    MySql快速插入以及批量更新 插入: MySql提供了可以一次插入多条数据的用法: [sql] INSERT INTO tbl_name (a,b,c) VALUES(1,2,3),(4,5,6), ...

  9. K好数(DP)

    问题描写叙述 假设一个自然数N的K进制表示中随意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数. 求L位K进制数中K好数的数目. 比如K = 4,L = 2的时候.全部K好数为11.13.2 ...

  10. Oracle 19C的下载和安装部署(图形安装和静默安装)

    Oracle 19C的下载和安装部署(图形安装和静默安装)   https://docs.oracle.com/en/database/oracle/oracle-database/19/ladbi/ ...