两个组件之间毫无关系，用到 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
