Element-ui 之跨级实现组件间通信 Emitter

原创

于 2025-08-20 18:00:21 发布 · 289 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #elementui

在 Element-ui 的源代码中，Emitter 用于跨级实现组件间的通信，本文将从 Emitter 的基本概念、使用方法和源代码这几个方面来进行解析。

一. 基本概念

Emitter 用于跨级实现组件间的通信，通过层层查找对应组件的事件名称来实现通信。当混入 Emitter 时，每一个组件都可以通过 dispatch 来向上级派发事件，或者通过 broadcast 来向下级派发事件。

二. 使用方法

2.1 dispatch 的使用

Emitter 提供 dispatch 方法，作用是向上级派发事件。下面以 Radio 组件和 Radio-Group 组件为例，来介绍一下使用方法：

当 Radio 组件的 value 值发生改变时，需要触发 Radio-Group 组件的 input 事件，此时 Radio 组件需要用到 dispatch 来向上级 Radio-Group 组件派发事件。

Radio 组件：

model: {
   
   
  ...
  set(val) {
   
   
    if (this.isGroup) {
   
   
      // 如果 Radio 组件处于按钮组中，则通过 dispatch 找到对应的上级 Radio-Group，并且触发其 input 事件
      this.dispatch('ElRadioGroup', 'input', [val]);
    } else {
   
   
      this.$emit('input', val);
    }
    ...
  }
},