Vue兄弟组件间的通信

Vue 的父子组件通信可以直接通过 组件上的事件来进行通信，而兄弟组件中间要通信则不是那么容易。

如果是复杂的应用，需要通过专门数据管理框架 Vuex 来实现，如果是比较简单的应用则需要通过中央事件总线来实现。

中央事件总线

原理就是通过一个空的 Vue 实例 ，然后 A 组件 定义在 中的事件 ， 然后在要触发事件的兄弟组件 B 中 同一个事件

来看具体的代码：

首先定义 Vue 实例

然后在组件A引入 后，通过 触发一个事件：

然后在组件B中触发相同的事件

改进

这样的确定是每个需要通信的组件都需要引入 ，所以希望能够一次注入，随处使用

要用到 这个 api，也就是每个组件都可以通过这个组件访问根组件，所以在定义 Vue 实例的入口处将 导入，然后在使用时通过 来访问它

在 main.js 中

组件A中

组件B中

通过原型

Vue 对象本质上就是一个 JS 对象，想要引入 只需要在 Vue 的原型 上增加一个属性就可以了。本质上所有的 Vue 组件都是继承全局的 Vue，所以只要在初始化 Vue 对象之前在 上定义属性，这样所有的组件都可以访问这个属性了。

所以在 main.js 中，在实例化 Vue 之前增加代码

组件A中

组件B中

参考

https://cn.vuejs.org/v2/guide/components.html

https://blog.csdn.net/a5534789/article/details/53415201

https://blog.csdn.net/wy01272454/article/details/77756079