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>