vue中有父子组件通信和非父子组件通信。父组件和子组件之间的通信非常简单。父组件通过props将数据传递给子组件。当子组件事件传递给父组件时，它将通过$emit事件传递给父组件。现在就来谈谈两个没有任何关系的组件之间如何进行通信的。

一、导入

首先创建事件总线将其导出，使其它模块能够使用或者监听它，有两种方式可以处理。
第一种方式：
import Vue from 'vue'
export const Bus = new Vue()
第二种方式：
// main.js
Vue.prototype.$Bus = new Vue()

二、创建事件

有两个Vue组件需要进行通信：分别是A组件和B组件，在A组件上绑定事件，该事件将向B组件发送消息。

//A组件
<template>
    <button @click="send">发送</button>
</template>

<script> 
export default {
  methods: {
    send() {
      Bus.$emit("click", '我是A发来的消息');
    }
  }
}; 
</script>

三、接收事件

//B组件
<template>
  <p>{{message}}</p>
</template>

<script> 
export default {
  data(){
    return {
      message: ''
    }
  },
  mounted() {
    Bus.$on("click", (message) => {
      // A传递的消息
      this.message= message;
    });
  }
};
</script>

以上就是A组件向B组件传递信息的过程，同理，B组件也可以向A组件传递信息，通过$emit发送，通过$on接收。

总结

本文通过简单的例子介绍了Vue中有关于 Bus总线机制相关的知识点。主要包括初始化、发送、接收等过程。从该例我们可以了解到， Bus总线机制可以较好的实现兄弟组件之间的数据通讯。