【HarmonyOS NEXT】使用EventHub进行数据通信

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

✨踩坑不易，还希望各位大佬支持一下，在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')
  }