Vue同级组件数据传递

最近工作中遇到朋友问我Vue同级兄弟组件怎么传递数据和接收数据，平时大量用到的都是父组件和子组件传递数据，于是查了一下资料，自己写了个简单的Deom，算是了解学习了这个知识点。

1、用到的文件说明：

demo.vue、eventBus.js、first.vue、second.vue

文件关系说明：first.vue、second.vue作为组件放到demo.vue中，first.vue、second.vue是两个平级兄弟页面作为组件嵌入到demo.vue中，下文有说明。

1.1、功能点如图所示：

ps：当点击组件一的按钮，把数据传送给组件二，组件二接收到内容后，把红色文字替换掉

2、同级组件不能直接传值，需要一个中间桥梁，这里我们定义个中间桥梁js文件,命名为eventBus.js

2.1、代码如下：

2.2、demo.vue 页面代码如下

demo.vue 主要是引入了first.vue 与 second.vue 两个页面当做组件。

2.3、first.vue 页面代码如下

引入 eventBus.js，$emit触发方法 【userDefinedEvent】，这个方法是自定义的，组件二接收的时候也用这个方法即可。

2.4、second.vue 页面代码如下

引入 eventBus.js，$on接收 【userDefinedEvent】方法传过来的回调参数。

点击按钮，页面效果如下

红色文字已经修改成我们传递过来的值。

一般大型的项目，推荐使用Vuex来管理组件之间的通信