详解利用eventemitter2实现Vue组件通信

《详解利用eventemitter2实现Vue组件通信》

概述

Vue.js 是一款建立在MVVM模式之上的框架，而在 Vue.js 应用开发中，组件通信是不可避免的。尽管Vue.js提供了许多方式来实现组件通信，使用EventEmitter2来实现组件通信能够更好的解耦组件，提高组件的复用性。

EventEmitter2 是 EventEmitter 的一个强化版，提供了更多的功能并支持命名空间。这些特性正好可以解决Vue.js中组件通信的各类问题，是一个非常实用的方案。

安装 eventemitter2

在Vue.js之外安装 eventemitter2：

npm install eventemitter2

在Vue.js中引入 eventemitter2：

import EventEmitter2 from 'eventemitter2'
const emitter = new EventEmitter2();
export default emitter;

在组件中，我们可以通过import将上述模块引入：

import emitter from './EventEmitter'

以上等价于：

import EventEmitter2 from 'eventemitter2'
const emitter = new EventEmitter2();
export default emitter;

监听事件

在组件中监听事件：

emitter.on('change', data => {
  console.log(data);
});

触发事件

在组件中触发事件：

emitter.emit('change', 'hello world');

示例说明

下面将介绍两个示例说明运用 eventemitter2 实现Vue组件通信。

示例一：父组件向子组件通信

在子组件中监听‘getmessage’事件：

emitter.on('getmessage', message => {
  this.message = message;
});

在父组件中触发‘getmessage’事件：

emitter.emit('getmessage', 'hello world');

示例二：子组件向父组件通信

在子组件中触发‘setmessage’事件：

this.$emit('setmessage', 'hello world');

在父组件中监听‘setmessage’事件：

<child-component @setmessage="setMessage"></child-component>
...
methods: {
  setMessage(message) {
    this.message = message;
  }
}