HarmonyOS鸿蒙Next中如何使用emitter实现事件总线进行组件间通信？

HarmonyOS鸿蒙Next中如何使用emitter实现事件总线进行组件间通信？ 我需要在不同页面或组件之间传递事件和数据，如何使用emitter实现事件总线？

3 回复

实现思路：

  1. 导入emitter模块：
import { emitter } from '@kit.BasicServicesKit';
  1. 定义事件ID并发送事件：
const EVENT_REFRESH = { eventId: 1001 };
emitter.emit(EVENT_REFRESH, { data: { message: 'refresh' } });
  1. 订阅事件并处理：
emitter.on(EVENT_REFRESH, (data) => {
  console.info(`Received: ${JSON.stringify(data)}`);
});
  1. 完整示例代码：
import { emitter } from '@kit.BasicServicesKit';

const EventIds = {
  USER_LOGIN: { eventId: 1001 },
  DATA_REFRESH: { eventId: 1002 }
};

class EventBus {
  static emit(eventId: emitter.InnerEvent, data?: Object): void {
    emitter.emit(eventId, { data: data });
  }

  static on(eventId: emitter.InnerEvent, callback: (data: emitter.EventData) => void): void {
    emitter.on(eventId, callback);
  }

  static off(eventId: number): void {
    emitter.off(eventId);
  }
}

@Entry
@Component
struct EventBusDemo {
  @State message: string = '';

  aboutToAppear() {
    EventBus.on(EventIds.DATA_REFRESH, (eventData: emitter.EventData) => {
      const data = eventData.data as Record<string, number>;
      this.message = `数据已刷新: ${data?.timestamp}`;
    });
  }

  aboutToDisappear() {
    EventBus.off(EventIds.DATA_REFRESH.eventId);
  }

  build() {
    Column({ space: 16 }) {
      Text(this.message || '等待事件...').fontSize(14)
      Button('发送刷新事件')
        .onClick(() => {
          EventBus.emit(EventIds.DATA_REFRESH, { timestamp: Date.now() });
        })
    }
    .padding(20)
  }
}

更多关于HarmonyOS鸿蒙Next中如何使用emitter实现事件总线进行组件间通信？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用emitter实现事件总线进行组件间通信，首先导入@ohos.events.emitter模块。通过emitter.on()订阅事件，emitter.off()取消订阅，emitter.emit()发送事件。事件以键值对形式传递，支持同步和异步模式。需注意事件命名唯一性，避免内存泄漏。

在HarmonyOS Next中，可以使用emitter模块实现事件总线，进行跨组件、跨页面的通信。以下是具体使用方法：

1. 导入模块

import emitter from '@ohos.events.emitter';

2. 定义事件

// 定义事件ID（建议使用字符串常量）
const EVENT_ID = 'my_custom_event';

3. 发送事件

// 创建事件数据
let eventData: emitter.EventData = {
  data: {
    message: 'Hello from sender',
    value: 123
  }
};

// 发送事件
emitter.emit({
  eventId: EVENT_ID,
  priority: emitter.EventPriority.HIGH  // 可选优先级
}, eventData);

4. 接收事件

// 创建订阅者
let subscriber: emitter.EventReceiver;

// 订阅事件
subscriber = emitter.on(EVENT_ID, (eventData: emitter.EventData) => {
  console.log('收到事件:', eventData.data);
  // 处理接收到的数据
});

// 取消订阅（在组件销毁时调用）
emitter.off(EVENT_ID, subscriber);

5. 一次性事件

// 只接收一次事件
emitter.once(EVENT_ID, (eventData) => {
  console.log('一次性事件:', eventData.data);
});

实际应用示例：

// PageA.ts - 发送事件
import emitter from '@ohos.events.emitter';

const UPDATE_LIST_EVENT = 'update_list';

function sendUpdateEvent() {
  emitter.emit({
    eventId: UPDATE_LIST_EVENT
  }, {
    data: { refresh: true }
  });
}

// PageB.ts - 接收事件
import emitter from '@ohos.events.emitter';

let receiver: emitter.EventReceiver;

aboutToAppear() {
  receiver = emitter.on(UPDATE_LIST_EVENT, (eventData) => {
    // 刷新列表数据
    this.refreshList();
  });
}

aboutToDisappear() {
  emitter.off(UPDATE_LIST_EVENT, receiver);
}

注意事项：

  • 事件ID建议使用有意义的字符串常量
  • 及时取消订阅，避免内存泄漏
  • 事件数据支持基本类型和对象
  • 可以在UIAbility、Page、Component等任何地方使用

这种方式解耦了组件间的直接依赖，适合状态更新、数据同步等场景。

回到顶部