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

<tmpelate>
        <top></top>
<cont></cont>
<foot></foot>

</tmpelate>

 

cont.vue

<template>
<div>
<h2>cont内容组件</h2>
<div>{{cont}}</div>
<div @click="change">click 把cont变量传给top</div>
</div>
</template>
<script>
import { Bus } from '../Bus.js'
export default {
  data() {
    return {
      cont:"我是cont的变量:cont",
    };
  },
  methods:{
    change(){

     //触发的事件名，发生的数据
      Bus.$emit('change',this.cont);
    }
  }
   
}
</script>

 

 

top.vue

<template>
<div>
<h2>top组件 </h2>
 
<div>cont页面传过来的变量{{cont}} </div>
 
</div>
</template>
<script>
import { Bus } from '../Bus.js'
export default {
  data() {
    return {
       cont:null,
    };
  },
  mounted(){

        //监测的事件名，接收过来的数据
   Bus.$on('change',(data)=>{
      this.cont=data;
    });
  } 
}
</script>

 

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

 

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