前言:
官方文档上指出,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)
}