Vue通过总线实现任意两个组件的通信

在写Vue的项目时，我们在一些组件中需要与其他组件进行通信，当然这里的通信不是父子之间的通信，首先，毋庸置疑的是肯定可以通过Vuex来实现的，但是有时候整体项目不是很庞大，总体组件也不是很复杂，用Vuex有点杀鸡用牛刀了，那么这时候我们就可以借助一个空的Vue实例作为中央事件总线来实现任意两个组件之间的通信。

<div id="app" style="text-align: center; margin-top: 100px;">
  <one></one>
  <two></two>
</div>

let bus = new Vue({}) // 为了方便在一个组件中使用bus，在实际的运用中一般会新建一个bus.js

Vue.component('one', {
  template: `<div>{
  {msg}}</div>`,
  data () {
    return {
      msg: 'Hello zy'
    }
  },
  created () {
    bus.$on('setMsg', val => {
      this.msg = val
    })
  }
})

Vue.component('two', {
  template: `<button @click="sendMsg">change msg</button>`,
  methods: {
    sendMsg () {
      bus.$emit('s