组件通信_自定义事件系统-js教程-PHP中文网

组件通信_自定义事件系统

夜晨

发布： 2025-11-28 21:19:02

原创

1019人浏览过

自定义事件系统基于发布-订阅模式，通过事件中心实现组件间解耦通信。1. 核心是EventHub类，提供on、emit、off方法管理事件；2. 组件通过emit触发事件，on监听事件，实现跨层级、兄弟组件通信；3. 适用于深层级传递、多组件响应同一状态场景；4. 需注意避免滥用、及时off移除监听、统一事件名管理，防止内存泄漏和维护困难。

组件通信_自定义事件系统

在前端开发中，组件化是构建可维护、可复用应用的核心方式。而组件之间如何通信，则是组件化设计的关键问题之一。除了常见的父子组件传值（props 和回调函数）外，自定义事件系统提供了一种更灵活、解耦更强的通信机制。

什么是自定义事件系统

自定义事件系统是一种基于“发布-订阅”模式（也称观察者模式）的通信机制。它允许组件不直接依赖彼此，而是通过一个事件中心来发送和监听消息。

核心思想是：一个组件触发（emit）某个事件，另一个组件提前注册（on）对该事件的监听，当事件发生时自动执行对应逻辑。

如何实现一个简单的事件中心

可以封装一个轻量的 EventHub 类，用于管理事件的监听与触发：

class EventHub {
  constructor() {
    this.events = {};
  }

  // 监听事件
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  // 触发事件
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }

  // 移除监听
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

登录后复制

将这个 EventHub 实例作为全局事件总线（event bus）或模块共享对象，即可在不同组件中使用。

在组件中使用自定义事件通信

假设我们有两个无直接关系的组件：一个按钮组件和一个显示区域组件。它们可以通过事件中心通信。

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/