EventEmitter不止双向绑定，开发过程中这样做可能事半功倍

2023-12-24 18:58:48

EventEmitter：Vue 中的通信利器

简介

在 Vue 生态系统中，除了双向数据绑定，EventEmitter 也是一种至关重要的通信方式。它是一种事件发射器，负责在组件之间传递事件。通过使用 EventEmitter，我们可以轻松实现组件之间的通信，让代码更加模块化和可重用。

EventEmitter 的工作原理

EventEmitter 的工作原理十分简洁明了。首先，我们需要创建一个 EventEmitter 对象。然后，我们可以使用 on() 方法监听特定的事件。当该事件发生时，EventEmitter 会自动调用我们注册的监听器。

代码示例：

const emitter = new EventEmitter();

emitter.on('event', () => {
  console.log('事件已触发！');
});

emitter.emit('event');

在这个示例中，我们创建了一个 EventEmitter 对象并注册了一个监听器。当我们调用 emitter.emit('event') 时，监听器将被调用，并打印信息“事件已触发！”到控制台中。

EventEmitter 在 Vue 中的应用

EventEmitter 在 Vue 中有着广泛的应用，包括：

组件间的通信：

EventEmitter 可以轻松实现组件间的通信。父组件可以创建 EventEmitter 对象并将其传递给子组件。子组件可以使用 on() 方法监听父组件发出的事件，从而实现组件间的通信。

代码示例：

父组件：

const emitter = new EventEmitter();

// ...

子组件：

emitter.on('event', () => {
  console.log('收到来自父组件的事件！');
});

事件处理：

EventEmitter 也可用于事件处理。我们可以创建一个 EventEmitter 对象并将其绑定到一个按钮。当按钮被点击时，EventEmitter 会发出一个事件，我们可以在监听器中处理该事件。

代码示例：

const emitter = new EventEmitter();

const button = document.getElementById('button');

button.addEventListener('click', () => {
  emitter.emit('event');
});

emitter.on('event', () => {
  console.log('按钮被点击了！');
});

代码复用：

EventEmitter 还支持代码复用。我们可以创建一个 EventEmitter 对象并将其用于多个组件中。这让我们可以在不同的组件中共享相同的事件处理逻辑。

代码示例：

const emitter = new EventEmitter();

// 组件 A
emitter.on('event', () => {
  console.log('组件 A 收到事件！');
});

// 组件 B
emitter.on('event', () => {
  console.log('组件 B 收到事件！');
});

emitter.emit('event');