兄弟组件信息通讯
2、通过EventBus进行兄弟间组件通讯 随着应用程序越来越庞大，通过父组件来传递所有内容会把事情变得越来越棘手。不过我们还有另一种选择，那就是使用EventBus架起兄弟之间通讯的桥梁。接下来看看我们是如何利用这一点一完成兄弟组件之间的数据通讯。
我们同样基于上面的示例来做修改。接下来的示例中，ParentCard组件包含了SisterCard和BrotherCard两个子组件，而且这两个子组件是兄弟组件。
首先在main.js文件中定义一个新的eventBus对象，其实他是一个全新的Vue实例：
// main.js
import Vue from 'vue'
import App from './App'
export const eventBus = new Vue()
new Vue({
el: '#app',
render: h => h(App)
})
接着在新创建的BrotherCard组件导入main.js：
eventBus实例现在将成为BrotherCard组件中发出事件的实例。现在我们可以使用eventBus.emit。eventBus是一个Vue实例，而且eventBus有这个$emit方法，这就是我们能够这么用的原因。这样做同样会触发相同的自定义事件名称和消息。
methods: {
messageSister() {
eventBus.$emit('brotherSaid', '妈妈说，该做作业了！(^_^)!!!')
}
}
同样可以在SisterCard组件中引入eventBus：
将created()生命周期钩子添加到SisterCard组件。在created()钩子中添加eventBus启动自定义事件的侦听器。当使用SisterCard组件时，该侦听器将开始运行并且会保持运行。下面的代码只是侦听brotherSaid自定义事件，然后触发回调，将作为自定义事件有效负载传递的消息分配给fromBrother。
created() {
eventBus.$on('brotherSaid', (message) => {
this.fromBrother = message
})
}
这样就可以有条件地显示来自BrotherCard的信息：
上面看到的是如何通过eventBus实现SisterCard向BrotherCard传递数据的方式，反之，BrotherCard向SisterCard`传递数据也可以使用类似的方式。
最终代码如下：
最后创建的ParentCard组件，我们可以像下面这样编码：
总结 在本教程中，我们学习了在Vue中如何实现组件之间的通讯。通过实例看到了如何实现父组件向子组件，子组件向父组件以及兄弟组件间的数据通讯。简单的根据为：
通过props可以实现父组件向子组件发送数据
通过自定义事件可以实现子组件向父组件发送数据
兄弟组件数据通讯除了借助共同的父组件做为通讯桥梁之外，还可以通过eventBus来让兄弟之间组件进行数据通讯
最后用一张图来简单的描述一下：
