五、eventBus

eventBus又稱為事件匯流排，在vue中可以使用它來作為溝通橋樑的概念, 就像是所有元件共用相同的事件中心，可以向該中心註冊傳送事件或接收事件， 所以元件都可以通知其他元件。

缺點：eventBus也有不方便之處, 當專案較大,就容易造成難以維護的災難

在Vue的專案中怎麼使用eventBus來實現元件之間的資料通訊呢?具體通過下面幾個步驟

1. 初始化

首先需要建立一個事件匯流排並將其匯出, 以便其他模組可以使用或者監聽它.

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

2. 傳送事件

假設你有兩個元件:additionNum和showNum, 這兩個元件可以是兄弟元件也可以是父子元件；這裡我們以兄弟元件為例:

<template>
  <div>
    <show-num-com></show-num-com>
    <addition-num-com></addition-num-com>
  </div>
</template>

<script>
import showNumCom from './showNum.vue'
import additionNumCom from 
 
'./additionNum.vue'
export default {
  components: { showNumCom, additionNumCom }
}
</script>

// addtionNum.vue 中傳送事件

<template>
  <div>
    <button @click="additionHandle">+加法器</button>    
  </div>
</template>

<script>
import {EventBus} from './event-bus.js'
console.log(EventBus)
export 
 
default {
  data(){
    return{
      num:1
    }
  },

  methods:{
    additionHandle(){
      EventBus.$emit('addition', {
        num:this.num++
      })
    }
  }
}
</script>

3. 接收事件

// showNum.vue 中接收事件

<template>
  <div>計算和: {{count}}</div>
</template>

<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },

  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>

4. 移除事件監聽者

import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})