通过bus进行组件通信

// bus.js
import Vue from 'vue';  
export default new Vue();  

// b1.vue
// 触发组件 b2 中的事件
bus.$emit('id-selected', 1)

// b2.vue
// 在组件 b2 创建的钩子(created)中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

//父子通信用props，子父通信用自定义事件


<div id="counter-event-example">
  <p></p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>


Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter"></button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})