当前位置：首页 > news >正文

ArkTS 模块通信全解析：用事件总线实现页面消息联动

news 2025/7/28 7:33:52

在这里插入图片描述

摘要

在 HarmonyOS 的开发过程中，随着项目模块的不断增加，页面与组件之间的直接调用变得不再现实。如何高效、解耦地实现模块间通信，成为了开发者关注的重点。ArkTS 提供了多种方案，其中事件总线是一种简单、轻便、扩展性强的方式，适用于大部分跨模块通信场景。

引言

在日常开发中，我们常常会遇到这样的情况：A 模块的某个动作需要影响 B 模块的状态，但这两个模块又没有直接的父子或引用关系。如果你还在用全局变量、静态方法传值，那其实风险挺大 —— 不仅维护难度高，而且逻辑容易混乱。为了解耦模块之间的通信，我们可以借助事件总线（EventBus）。

事件总线是一种发布-订阅模式，它允许我们在不同组件或模块之间传递消息，而不需要彼此知道对方的存在。

跨模块通信的实现方式

使用事件总线封装通信逻辑

我们先来创建一个全局的事件总线类 EventBus.ts，它是整个通信机制的核心。

// EventBus.ts
export class EventBus {private static instance: EventBus;private events: { [key: string]: Function[] } = {};private constructor() {}static getInstance() {if (!EventBus.instance) {EventBus.instance = new EventBus();}return EventBus.instance;}on(event: string, callback: Function) {if (!this.events[event]) {this.events[event] = [];}this.events[event].push(callback);}emit(event: string, data?: any) {if (this.events[event]) {this.events[event].forEach((callback) => callback(data));}}
}

这个类使用了单例模式，确保事件中心只有一个实例，并通过 on 方法监听事件，通过 emit 方法广播事件。

主页面：发送事件的模块

我们在主页面 MainPage.ets 中使用按钮点击来发送一个事件：

// MainPage.ets
import { EventBus } from './EventBus';@Entry
@Component
struct MainPage {build() {Column() {Button('Send Event').onClick(() => {EventBus.getInstance().emit('message', 'Hello from MainPage');});}.padding(20);}
}

点击按钮时，通过 emit 方法发送了一个名为 message 的事件，并携带数据 Hello from MainPage。

接收页面：监听并响应事件

在另一个页面 SecondaryPage.ets 中，我们来接收这个事件：

// SecondaryPage.ets
import { EventBus } from './EventBus';@Entry
@Component
struct SecondaryPage {private message: string = 'No message yet';build() {// 注册事件监听器EventBus.getInstance().on('message', (data) => {this.message = data;});Column() {Text(this.message).fontSize(20);}.padding(20);}
}

SecondaryPage 中注册了 message 事件的监听器，每当有消息发出时，就会更新页面上的 message。

实际应用场景举例

场景一：登录成功后通知首页刷新用户信息

代码示例：

// LoginPage.ets
EventBus.getInstance().emit('loginSuccess', { username: '张三' });// HomePage.ets
EventBus.getInstance().on('loginSuccess', (data) => {this.username = data.username;
});

说明：

用户登录成功后不需要手动跳转或回调处理，首页收到 loginSuccess 事件后即可自动更新展示用户名或用户信息。

场景二：设置页面修改主题，通知多个模块更新 UI 风格

代码示例：

// SettingsPage.ets
EventBus.getInstance().emit('themeChanged', 'dark');// AnyPage.ets
EventBus.getInstance().on('themeChanged', (theme) => {this.currentTheme = theme;
});

说明：

通过事件总线广播主题变更事件，多个页面只需要注册监听就能自动响应，无需层层传递参数。

场景三：播放器状态通知多个页面同步更新

代码示例：

// Player.ets
EventBus.getInstance().emit('playStatus', 'paused');// FooterWidget.ets / LyricsPage.ets / ControlPanel.ets
EventBus.getInstance().on('playStatus', (status) => {this.playStatus = status;
});