vuejs 中eventBus 实现 非父子组件通信 兄弟组件通信

vuejs2.0中文档里面有清楚的说明了父子组件的通讯方法，但是没怎么说到非父子组件的通讯，很多新学习的同学不太会！
在vuejs 2.0中能实现到兄弟组件或是非父子组件组件的通讯有两种方法，1.eventBus  2.vuex

我们这里说下eventBus的使用

主要内容点：

1.const = eventbus = new Vue()
// 触发 footer 组件里的change事件
2.bus.$emit('change', data)
// 在组件top 的mounted 中监听事件 
3.bus.$on('change', function (data) {
  // ...

})

举个栗子：
一个home页面用三个组件组成top.vue  cont.vue   foot.vue

 

首先创建一个Bus.js,主要是使用一个空的Vue实例作为中央事件总线

Bus.js

import Vue from 'vue'
const Bus=new Vue({
})

//导出bus
export { Bus } 

home.vue

       

 

cont.vue

 

 

top.vue

 

........................................

 

eventbus也可以传父子组件的通讯