EventEmitter3 在vue 中的運用

簡介

EventEmitter3是一個高性能的事件發射器。它針對各種代碼路徑進行了微優化，使其成為Node.js和瀏覽器可用的最快的EventEmitter之一。

其中運用的設計模式就是發布-訂閱者模式。在日常開發中運用場景有代替v-model實現自定義組件雙向綁定、非父子組件之間的通訊等等。

安裝

npm install --save eventemitter3
or
yarn add eventemitter3

import EvemtEmitter3 from 'eventemitter3'

Vue.prototype.$eventBus = new EvemtEmitter3;

parent-c.vue

<template>
  <div>
    Parent
    <sub-c :event="event" />
  </div>
</template>

<script>
// 導入eventemitter3
import EventEmitter3 from 'eventemitter3'

import SubC from './sub-c.vue'
export default {
  components: {
    SubC
  },
  data () {
    return {
      event: null
    };
  },
  computed: {

  },
  created () {
    // 初始化事件對象放在created當中
    this.event = new EventEmitter3;
  },
  mounted () {
    // 初始化激活事件放在mounted,因為子組件通常在created當中注冊事件，如果在都在created鈎子函數當中會導致事件無法激活
    this.event.emit('testAlert', ' this is Parent emit')

  },
  watch: {

  },
  methods: {
  },
  destroyed () {
    // 移除事件(如果你把event作為一個全局中央事件中心,避免事件冗余和疊加)
    // console.log('移除事件')
    // this.$eventBus.removeListener('eventName')
  }
};
</script>

sub-c.vue

<template>
  <div>
    Sub
  </div>
</template>

<script>
export default {
  props: {
    event: {
      type: Object
    }
  },
  components: {

  },
  data () {
    return {

    };
  },
  computed: {

  },
  created () {
    // 監聽事件統一般情況放在created當中
    this.event.on('testAlert', this.test)
  },
  mounted () {
  },
  watch: {

  },
  methods: {
    test (msg) {
      alert('testAlert success' + msg)
    }
  },
};
</script>