项目中使用了事件总线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. 使用 Python 将 HTML 转成 PDF

    背景 很多人应该经常遇到在网上看到好的学习教程和资料但却没有电子档的,心里顿时痒痒, 下述指导一下大家,如何将网站上的各类教程转换成 PDF 电子书. 关键核心 主要使用的是wkhtmltopdf的P ...

  2. AYUI第12个作品-英雄联盟-魔法少女的星光水晶2.0-WPF版本

    一下 内容基于AYUI6.7制作,主要3个大控件,1个 轮播预览,一个抽奖展示,一个是自己的抽中的历史展示,还有礼品领取,图片变成黑白的滤镜,滚动条网页方式布局 历时4天,制作效果如下: 由于自己爬了 ...

  3. Effective Java 第三版——78. 同步访问共享的可变数据

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  4. 【Vegas原创】MAC下,idea手动maven jar包的方法

    1,到自己的项目目录下 Vegass-MacBook-Air:gms-boyol Vegas$ pwd/Users/Vegas/SynologyDrive/Coding/workspace/gms-b ...

  5. redis的事务不是原子性

    Reference: https://blog.csdn.net/u011692780/article/details/81213010 一.事务的四大特性 关系型数据库的事务具有四个特性: 1. 原 ...

  6. Canvas入门到高级详解(下)

    四. Canvas 开发库封装 4.1 封装常用的绘制函数 4.1.1 封装一个矩形 //思考:我们用到的矩形需要哪些绘制的东西呢? 矩形的 x.y坐标 矩形的宽高 矩形的边框的线条样式.线条宽度 矩 ...

  7. 分布式Id教程

    转自:https://baijiahao.baidu.com/s?id=1584913615817222458&wfr=spider&for=pc 一,题记 所有的业务系统,都有生成I ...

  8. Android Studio打包程序时出现transformClassesWithDexForRelease错误

    百度半天.没找到直接原因..国外网站上有写这个错误的..国内的真心没找到..英语水平有太低..实在没看懂怎么搞.. 后来发现clean项目的时候是提示如下错误: Information:Gradle ...

  9. flume的安装部署

    系统环境:centos7.5  64位系统 1.下载安装包 官网下载离线安装包:apache-flume-1.8.0-bin.tar.gz 也可以使用linux命令下载: wget -c http:/ ...

  10. python3 写一个简单的websocket程序(转)

    原贴:https://segmentfault.com/q/1010000009284816?_ea=1883181 也是找了好久 #! /usr/bin/env python # -*- codin ...