在前端，不管我们做什么样的业务和功能，都不会离开页面之间的通信问题，在pc端是这样，在移动端更需要解决页面之间的通信问题。
今天我们来看看Vue的通信方法一----事件总线。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线，具体的官方文档可看非父子组件通信 。官方文档很简洁，但是像我这种菜鸟看的是一脸懵逼，官方的例子也没有(估计是认为太简单了????),最后自己慢慢摸索，实践，感觉事件总线还是挺好用的。
首先看一下基本的目录结构：

首先声明一下，components下面的三个组件互相之间并没有什么关系，强调一下没有任何关系，不要把他们当成兄弟组件关系，仅仅是放到同一个目录下而已。事件总线实际就是一个new出来的空的vue实例，就是目录中的 eventBus.js ,其内容是

不懂的就把他看成是中介公司，通过它达到你和用人单位之间的合作(通信)，然后在每个组件引用它就????了。
先来看一下我们的donghua组件内容，直接上图

v-show是用来控制显示或隐藏的，其实它控制的是display，vue的特点之一就是组件化，即可重用，可以被别的组件嵌套(即组件套组件的方式)。但是想要随时使用某个组件时，以上红箭头的三步是必备的步骤，缺一不可，即第一步导入组件的资源文件import xx，第二步，在components中注册导入的组件，最后将注册的组件当自定义的标签一样在模板中使用，注意一定得放到thirdchild这个div的里面，不能与其同级，因为一个模板有且仅有一个根节点，并且自定义的标签名要与注册的组件名一样，其实在components注册的组件是简化了的，实际是

当导入的组件名和标签名一样时可以简写(即只写一个)，当然标签名<firtst></first>也是可以改的，但是得要与components中键值对中的key(健名)相同即可，实际上key就是我们自定义的名字(标签名)，健值就是组件名。
fisrtchild组件的内容为

为了显眼点，我给donghua组件的边框为红色，firstchild组件的边框为蓝色，现在donghua组件的现象是

现在我们给donghua组件一个点击事件并把消息“hello guo”带到firstchild组件并显示出来

运用bus的前提是你已经引进来了这个文件

然后我们在firstchild那边接收并显示

注意$emit和$on发送和接收的事件名必须一致，本次事件名是event，然后回调函数对接收的数据进行处理(可以直接操作data里面的数据)，还要注意下this对象，即上下文的内容(黄色的框)，我们来看一下结果

“hello guo”就出现了，但这不是兄弟组件的传值，donghua和firstchild属于父子组件，因为firstchild是以标签的形式嵌入donghua组件中的，我们再来写一个second组件，边框为绿色。

然后我们再donghua组件中注册它

现在firstchild和second就是兄弟组件的关系了，现在我们来传值，在firstchild组件将“欢迎来到gsben的博客”信息发给second的组件并让其显示出来，firstchild的内容是

我们现在再来看看donghua组件

当我们点击firstchild组件传值按钮后，

会发现，接收值从world变成了我们传的值“欢迎来到gsben的博客”，这样兄弟组件的也成功了。

但是，作为一个小白，这过程肯定会遇到问题的(可能我的领悟能力太差)，下面是我曾经遇到的困难，纠结等的总结，想给大家分享一波。

第一：要弄清楚兄弟组件中组件之间的关系，并不是在同一个目录长得都差不多就是兄弟组件关系，只有两个组件在同一div(容器)内，才算是兄弟关系，当然组件可以套子组件，子组件还可以在套子组件，就是可以有多层关系(父子，兄弟，祖孙...)，注意组件使用的三部曲。

第二：并不一定得把所有组件都放到app.vue中，app.vue是一个根节点，也是一个单页面内容的展示区。一般只会把公共的部分放到app.vue中，只要放到app.vue中的东西，不管是html标签还是组件，在最开始加载时都会将他们显示出来。所以一般除了公共的内容放到app.vue中，其他的都会放到组件中，然后在配置路由，让一加载，就自动到指定的路由所对应的组件上，如上面的例子

你也可以让加载后只显示一个组件，而不是三个组件，让人感觉就像是页面跳转了一样，换了一个页面似的。我上面用的是v-show 你也可以用绑定类class的方法来控制。

第三：深刻理解单页面。vue的整个应用其实就是一个页面，只是配置了不同是路由，然后跳转到不同的组件，有的甚至不需要配置路由，直接将很多内容或者组件放在一个div中，然后控制他们的显示或是隐藏就可以了，点击一下，就换一个页面，看起来是跳转了页面(实际上只是改变了下组件的隐藏而已，其实你也可以看到它跳转的时候或是更换页面的时候，其实url并没有改变)。

我记得官方文档说过，你的页面不是很多，业务逻辑也不是很复杂时，事件总线是一个很好的解决页面通信的方法，其不仅在于兄弟组件能通信，也可跨组件通信，本次实践内容就是这样。最后一句，实践是检验真理的唯一标准！

以上就是本章的内容，有点啰嗦，但是是我做兄弟组件通信时的“心里路程”，欢迎吐槽，本节代码事件总线。最近在看vue作者力荐的一本书Vue.js实战，很nice，里面讲得非常详细，感兴趣的小伙伴可以看看。