鸿蒙：使用EventHub实现多模块之间的通信

前言：

官方文档上指出，EventHub是系统提供的基于发布-订阅模式实现的事件通信机制。通过事件名，实现了发送方和订阅方之间的解耦，支持不同业务模块间的高效数据传递和状态同步。

主要用于UIAbility组件与UI的数据通信。

还是老样子，在学习新知识之前，我们应当参考官方文档和示例，链接如下：

文档中心https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-inner-application-eventhub看完了文档，相信你对EventHub有了了解，那么我们就来实践演练吧。

这里就不多解释，我已经封装好了，直接上效果图和代码：

代码如下：

1、EventHubUtil.ets

复制代码

import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';

class EventHubUtil {
  context: common.UIAbilityContext = AppStorage.get('appStorage') as common.UIAbilityContext
  value: number = 0;

  eventFunc() {
    console.log('eventFunc is called');
  }

  // 订阅事件
  on() {

    try {
      // 支持使用匿名函数订阅事件
      this.context.eventHub.on('myEvent', () => {
        console.log(`anonymous eventFunc is called, value: ${this.value}`);
      });
      promptAction.showToast({ message: "订阅成功！" })
    } catch (e) {
      let code: number = (e as BusinessError).code;
      let msg: string = (e as BusinessError).message;
      console.error(`EventHub emit error, code: ${code}, msg: ${msg}`);
    }


  }

  // 发送事件
  emit() {
    this.value++
    try {
      // 结果：
      // anonymous eventFunc is called, value: 12
      this.context.eventHub.emit('myEvent');
      promptAction.showToast({ message: "发送成功！" })
    } catch (e) {
      let code: number = (e as BusinessError).code;
      let msg: string = (e as BusinessError).message;
      console.error(`EventHub emit error, code: ${code}, msg: ${msg}`);
    }
  }

  // 取消事件
  off() {
    this.context.eventHub.off('myEvent');
    promptAction.showToast({ message: "取消成功！" })
  }
}

export const eventHubUtil = new EventHubUtil();

2、Index.ets

复制代码

import { emitterUtil } from "./EmitterUtil"
import { eventHubUtil } from "./EventHubUtil"

// emitter使用示例
@Entry
@Component
export struct Index {
  build() {
    Column({ space: 20 }) {
      // Button("emitter.fire")
      //   .onClick(() => {
      //     emitterUtil.fire()
      //
      //   })
      //
      // Button("emitter.on")
      //   .onClick(() => {
      //     emitterUtil.on()
      //
      //   })
      //
      // Button("emitter.off")
      //   .onClick(() => {
      //     emitterUtil.off()
      //
      //   })


      Button("EventHub.emit")
        .onClick(() => {
          eventHubUtil.emit()
        })

      Button("EventHub.on")
        .onClick(() => {
          eventHubUtil.on()
        })

      Button("EventHub.off")
        .onClick(() => {
          eventHubUtil.off()
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)

  }
}

以上是个人经验分享。

······················

补充一下，EntryAbility.ets中需要添加的内容：

找到onCreate方法：

复制代码

    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
      // 存储UIAbilityContext
      AppStorage.setOrCreate('appStorage', this.context)
}