[Vue.js] 跨元件的資料傳遞 Eventbus 簡易使用範例

Eventbus可以達成跨元件的資料傳遞，這個範例只是作為Eventbus效果的示範，依據實際的應用時，不一定使用eventbus是最合適的，可以考量使用props/emit父子元件的傳遞方式，或是vuex來需要共用的資源。

先參考一下整體的檔案結構：

├── App.vue
├── components
│   ├── Button.vue
│   └── DisplayBoard.vue
├── libs
│   └── eventbus.js
└── main.js

eventbus.js

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

MyButton.js
傳遞eventbus的元件，當按下按鈕時，會將目前的值傳出去，以$emit發出一個 "add-count" 的事件。

<template>
  <button @click="onClickCountAdd">Click</button>
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from '../libs/eventbus.js';

export default {
  data() {
    return {
      clickCount: 0,
    }
  },
  methods: {
    onClickCountAdd() {
      this.clickCount++;
      // Send the event on a channel (add-count) with a payload (the click count.)
      EventBus.$emit('add-count', this.clickCount);
    }
  }
}
</script>

DisplayBoard.js
註冊eventbus的元件，$on是註冊；$off是取消，兩者必須成雙出現，可以避免產生重複綁定。display-board註冊 "add-count" 的事件，後面的參數是時間接收到事件時，負責處理的method。

<template>
  <div v-text="displayCount" />
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from '../libs/eventbus.js';

export default {
  data() {
    return {
      displayCount: 0,
    }
  },
  created() {
    this.handleClick = this.handleClick.bind(this);
    // Listen to the event.
    EventBus.$on('add-count', this.handleClick);
  },
  destroyed() {
    // Stop listening.
    EventBus.$off('add-count', this.handleClick);
  },
  methods: {
    handleClick(clickCount) {
      this.displayCount = clickCount;
    }
  }
}
</script>

App.js

<template>
  <div>
    <my-button />
    <display-board />
  </div>
</template>

<script>
import MyButton from './components/MyButton'
import DisplayBoard from './components/DisplayBoard'

export default {
  components: {
    MyButton,
    DisplayBoard,
  }
}
</script>

最終成果，隨著my-button內按鍵點擊，display-board需呈現目前的點擊數。