Vue.js 非父子组件之间的通讯

在一些非父子组件会经常用到互相之间的通讯功能，Vue.js 有 vuex 状态管理模式，但是非大型的项目也就不需要使用它，这会增加其难度的。官网介绍的一种方式是使用一个空 Vue 实例作为中央事件总线。
那么在 vue-cli 项目中可以这样使用：

main.js

// main.js 文件
import Vue from 'vue'
...
Vue.prototype.bus = new Vue({})

App.vue

<template>
  <c1></c1>
  <c2></c2>
</template>
<script>
  import c1 from '@/components/c1'
  import c2 from '@/components/c2'
  ...
  components: {
    c1,
    c2
  }
  ...
</script>

c1.vue

<template>
  <div id="app">
    C1计数：{{fooCount}}
    <br>
    <button @click="countC2">点击会修改C2的计数</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        fooCount: 0
      }
    },
    mounted () {
      this.bus.$on('countC1', (num) => {
        this.fooCount += num
      })
    },
    methods: {
      countC2 () {
        this.bus.$emit('countC2')
      }
    }
  }
</script>

<style lang="sass">
  
</style>

c2.vue

<template>
  <div id="app">
    C2计数：{{barCount}}
    <br>
    <button @click="countC1">点击会修改C1的计数</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        barCount: 0
      }
    },
    mounted () {
      this.bus.$on('countC2', () => {
        this.barCount++
      })
    },
    methods: {
      countC1 () {
        this.bus.$emit('countC1', 91)
      }
    }
  }
</script>

<style lang="sass">
  
</style>