vue 事件总线EventBus的概念、使用

两个组件之间毫无关系，用到 vue 中的事件总线 EventBus的概念来传递数据

EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件

一、初始化

因为是全局的一个'仓库'，所以初始化要在全局初始化(main.js)

• 第一种

import Vue from 'vue'
const EventBus = new Vue()  

• 第二种

import Vue from 'vue'
Vue.prototype.$EventBus = new Vue()   

二、向EventBus发送事件

发送事件的语法：this.emit(发送的事件名,传递的参数)

例子：

有两个组件A和B需要通信，他们不是父子组件关系，B事件需要获得A事件里的一组数据data

三、接收事件

接收事件的语法：this.on(监听的事件名, 回调函数)

A组件已经向全局事件总线EventBus发送了一个aMsg事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。

四、移除监听事件

移除监听事件语法：this.off(要移除监听的事件名)

• 如果我们离开B组件，然后再次进入B组件时，又会触发一次对事件aMsg的监听，这时时间总线里就有两个监听了，如果反复进入B组件多次，那么就会对aMsg进行多次的监听。
• A组件只向EventBus发送了一次事件，但B组件却进行了多次监听，EventBus容器中有很多个一模一样的事件监听器这时就会出现，事件只触发一次，但监听事件中的回调函数执行了很多次
  1.解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听

原文链接：https://blog.csdn.net/starzhou/article/details/119793562