Vue.js 非父子組件之間的通訊

在一些非父子組件會經(jīng)常用到互相之間的通訊功能，Vue.js 有 vuex 狀態(tài)管理模式，但是非大型的項目也就不需要使用它，這會增加其難度的。官網(wǎng)介紹的一種方式是使用一個空 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計數(shù)：{{fooCount}}
    <br>
    <button @click="countC2">點擊會修改C2的計數(shù)</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計數(shù)：{{barCount}}
    <br>
    <button @click="countC1">點擊會修改C1的計數(shù)</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>