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

<template>
    <button @click="sendMsg">发送MsgA</button>
</template>
 
<script> 
export default {
  data(){
    return{
        MsgA: 'A组件中的Msg'
    }
  },
  methods: {
    sendMsg() {
      /*调用全局Vue实例中的$EventBus事件总线中的$emit属性，发送事件"aMsg",并携带A组件中的Msg*/
      this.$EventBus.$emit("aMsg", this.MsgA);
    }
  }
}; 
</script>

三、接收事件

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

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

四、移除监听事件

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

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

<!-- B.vue -->
 
<template>
  <!-- 展示msgB -->
  <p>{{msgB}}</p>
</template>
 
<script> 
export default {
  data(){
    return {
      //初始化一个msgB
      msgB: ''
    }
  },
  mounted() {
    /*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送
    到事件总线中的aMsg事件*/
    this.$EventBus.$on("aMsg", (data) => {
      //将A组件传递过来的参数data赋值给msgB
      this.msgB = data;
    });
  },
  beforeDestroy(){
    //移除监听事件"aMsg"
    this.$EventBus.$off("aMsg")
  }
};
</script>

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