Event Bus

為了接下來幾天的 Vuex，今天先來講一下什麼是 event bus，之前有說過在元件之間的溝通，父元件往內傳資料是用 props，而子元件向父元件傳遞資料是用 emit，不過 emit 需要靠事件觸發，也就是之前常常在說的， props in emit out 的口訣，那麼如果我要跨元件溝通呢？如果想要跟父元件的父元件傳遞資料，或是兄弟元件間要觸發事件的話，該怎麼辦？這時就得靠 event bus 啦！直接來看範例吧！

首先我們建立一個 bus.js 的檔案，內容配置如下，目的是要在 Vue 的原型下掛載 event bus。

//src/bus.js

import Vue from 'vue'
Vue.prototype.$bus = new Vue();

接下來，要在進入點的 main.js 下注入 event bus，這樣就可以呼叫 Vue 原型下的 event bus 囉！

//src/main.js

import App from './App'
import router from './router'
import './bus'

接下來，我先在 App.vue 下建立一個方法，是要 Alert 一些訊息的，然後就是重點囉！
我在 created 的 hook 的時候，在 bus 下註冊了一個 alert:message 的方法，方法名稱可以自定義，註冊的話是使用 on 的方式，後面是使用 ES6 的語法，如果看不懂，建議先熟悉一下 ES6 的箭頭涵式唷！當 alert:message 被呼叫後會觸發 showAlert 的方法。

//src/App.vue

<script>
export default {
  name: 'App',
  methods: {
    getCard() {
      this.$http.get('https://randomuser.me/api/').then(response => {
        console.log(response)
      })
    },
    showAlert(msg) {
      alert(msg)
    },
  },
  created() {
    this.getCard();
    this.$bus.$on('alert:message', (msg) => {
      this.showAlert(msg)
    })
  },
}
</script>

之後，我們到 Child1.vue 裡建立一個按鈕，並且再給他一個點擊事件，這個事件被觸發後會呼叫 bus 裡的 alert:message 的方法，後方可以帶上要傳入的參數，在這裡我們如果要呼叫 bus 的話是用 emit 的方式去呼叫，這時就可以正確 alert 出我們要的資訊囉！

//src/components/Child1.vue

<template>
  <div class="hello">
    <h2>This is Child 1 !!!!</h2>
    <button @click="doShowAlert(message)">Click Me</button>
  </div>
</template>

<script>
export default {
  name: 'Child1',
  data () {
    return {
      message: 'This is from Child1'
    }
  },
  methods: {
    doShowAlert(msg) {
      this.$bus.$emit('alert:message', msg);
    }
  }
}
</script>

如果有正確顯示訊息的話就恭喜囉！

那麼，明天再見囉！