前言

Event Bus是甚麼?甚麼時候需要它?
其實我曾經教過大家父子元件的溝通可以透過props、emit，那如果不是父子關係的元件怎麼溝通?還不是太複雜的專案，其實是可以透過Event Bus 發起全域的事件送出事件或資料，元件可以用on來監聽發出的事件或資料。

建立實體

首先要建立一個eventBus prototype，再將eventBus實體加入Vue的根實例上

// main.js
import Vue from 'vue'
import App from './App'

Vue.prototype.$bus = new Vue();

new Vue({
  render: h => h(App),
}).$mount('#app')

eventBus 使用的四種方法

• @method $on 事件訂閱, 監聽當前例項上的自定義事件。
• @method $off 取消事件訂閱，移除自定義事件監聽器。
• @method $emit 事件發送, 觸發當前例項上的事件。
• @method $once 事件單次訂閱, 監聽一個自定義事件，但是只觸發一次，在第一次觸發之後移除監聽器。

在元件創立時開始監聽，元件銷毀前取消監聽

我們將eventBus導入元件裡使用，記得最好在元件創立的生命週期鉤開始監聽工作，也一定要在元件被銷毀前取消監聽。

// toastMessage.vue
import Toast from './components/toast'
export default {
  name: 'toastMessage',
  components: {
    Toast
  },
  created () {
    // 在 created 鉤開始監聽 toastMessage 事件
    this.$bus.$on("toastMessage", event => {
      // 並將接收到的資訊傳給 messageSetting 去觸發 toast 事件。
      this.messageSetting(event);
    });
  },
  beforeDestroy () {
    // 元件銷毀前要取消監聽
    this.$bus.$off("toastMessage");
  },
  methods: {
    messageSetting(event) {
      const setting = { severity:'info', summary: event.title, detail: event.msg, life: 3000 }
      this.toast.add(setting)
    },
  }
};
...
// app.vue
export default {
  name: 'App',
  components: {
    printHelloWorld,
    toastMessage
  },
}

發送事件

透過 prototype $bus，我們可以再任意元件調用eventBus來發送事件

<script>
export default {
    name: 'printHelloWorld',   
    methods: {
        print () {
            // emit透過物件事件傳送
            this.$bus.$emit('toastMessage', {
                title: 'EventBus',
                msg: 'HelloWorld!!'
            });
        }
    },
    // code...
}
</script>

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang