西安网站建设-中国互联网站备案个人承诺书

✨本人自己开发的开源项目：土拨鼠充电系统

✨踩坑不易，还希望各位大佬支持一下，在GitHub给我点个 Start ⭐⭐👍👍

✍GitHub开源项目地址👉：https://github.com/cheinlu/groundhog-charging-system

一、背景

EventHub模块提供了事件中心，提供订阅、取消订阅、触发事件的能力。

在项目开发中，可以通过EventHub来进行页面之间的数据通信

二、EventHub的几种方法

1、emit(event: string, ...args: Object[]): void;👉👉触发指定事件。

2、on(event: string, callback: Function): void;👉👉订阅指定事件。

3、off(event: string, callback?: Function): void;👉👉取消订阅指定事件。当callback传值时，取消订阅指定的callback；未传值时，取消订阅该事件下所有callback。

三、具体实现

需求：在EventHub1页面，点击按钮将数据message，传递给EventHub2页面

3.1、EventHub1组件通过eventHub.emit()订阅事件

@Component
export struct EventHub1 {@State message: string = 'harmony'build() {Column() {Text('EventHub1')Button('点击按钮向EventHub2发事件').onClick(() => {getContext().eventHub.emit('share', this.message) //订阅事件})}.height(100).width('100%').justifyContent(FlexAlign.Center).borderWidth(2).borderColor(Color.Red)}
}

 3.2、EventHub2组件通过eventHub.on()触发事件

@Component
export struct EventHub2 {@State shareMessage: string = ''aboutToAppear(): void {//触发事件getContext().eventHub.on('share', (message: string) => {this.shareMessage = message})}build() {Column() {Text('EventHub2')Text() {Span('接收EventHub1发送的内容:')Span(this.shareMessage).fontColor(Color.Orange).fontWeight(FontWeight.Bold)}}.height(100).width('100%').justifyContent(FlexAlign.Center).borderWidth(2).borderColor(Color.Green)}
}

3.3、实际效果

3.4、取消订阅事件

当离开页面时可以取消订阅事件，aboutToDisappear中使用eventHub.off()来进行取消，如下操作：

aboutToDisappear(): void {getContext().eventHub.off('share')}