HarmonyOS Development: Event Subscription EventHub

Foreword

this article is based on Api13

there is A case where page A jumps to page B, and page B jumps to page C. In page C, the data needs to be called back to page A. How should we do it? Or, if you need to call a method in another module in one module, how should you call it? In many scenarios, we will think of callback methods. What if there are more levels? Step-by-step callback can be solved, but it is very troublesome. In order to solve this problem, Hongmeng provides a capability similar to EventBus, which is EventHub .

One word interpretation: EventHub is an event center module for intra-thread communication in Hongmeng development. , provides the ability to subscribe to, trigger, and unsubscribe to events.

There are three main features, the first of which is the event center, based on the publish-subscribe model, which allows communication by event name, the second is that it only supports event delivery within the same thread and does not apply to cross-process or inter-virtual machine communication, and the third is the singleton model, each. AbilityContext the instance has an independent EventHub, and the event operation only applies to the current context.

Simple Case

@Entry
@Component
struct DemoPage {
  aboutToAppear(): void {
    getContext().eventHub.on("test", (data: string) => {

      console.log("====" + data)
    })
  }

  build() {
    Column() {
      Button("click")
        .onClick(() => {

          getContext().eventHub.emit("test", "hello")
        })
    }
  }
}

the above code, after clicking the button, triggers a test event and sends a hello string. In the aboutToAppear declaration cycle, subscribing to the test event will receive the sent message.

Introduction to the EventHub method

View source code, there are three methods in EventHub, namely on,off and emit. The source code is as follows:

on(event: string, callback: Function): void;

off(event: string, callback?: Function): void;

emit(event: string, ...args: Object[]): void;

the on method

primarily used to subscribe to specified events.

Parameter Name	type	required	description
event	string	yes	the event name.
callback	Function	yes	event callback, called after the event is triggered.

off Method

it is mainly used to unsubscribe from a specified event. If a callback is passed, it means that the specified callback is unsubscribed to the specified event. When the event is triggered, the callback will not be called. If no callback is passed, it means that all callbacks are unsubscribed to the specified event.

Parameter Name	type	required	description
event	string	yes	the event name.
callback	Function	No	event callback. If no callback is sent, unsubscribe from all callbacks under the event.

emit method

used to trigger the specified event.

Parameter Name	type	required	description
event	string	yes	the event name.
...args	Object[]	no	variable parameter, the parameter passed to the callback function when the event is triggered.

Data transfer between components

itself. EventHub has three methods, which are also very simple to use. They can be applied to data transfer between pages or components, or status return. The following is a simple demonstration of data transfer between components.

@Entry
@Component
struct DemoPage {
  @State message: string = ""

  aboutToAppear(): void {
    getContext().eventHub.on("callBack", (data: string) => {

      this.message = data
    })
  }

  aboutToDisappear(): void {

    getContext().eventHub.off("callBack")
  }

  build() {
    Column() {
      Text(this.message)
      TestView()
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct TestView {
  @State num: number = 0

  build() {
    Button("data")
      .onClick(() => {
        this.num++
        getContext().eventHub.emit("callBack", "data:" + this.num)
      })
  }
}

If you just want to send a notification, you can do it without parameters.

Related Summary

EventHub mainly provides a lightweight intra-thread communication mechanism, which is suitable for scenarios such as data synchronization and status notification between components. In actual development, two things must be paid attention to. One is to pay attention to the use of off unsubscription to avoid memory leakage. The other is the specification for event naming, it is recommended to use constants to define event names to avoid hard-coding errors.