“答开发者问”之HarmonyOS鸿蒙Next技术问题解析 第10期

问题四：使用EventHub进行数据通信可以反向操作吗，比如控件端由发送消息改为接收消息？

问题描述：

官方举的例子都是从UIability订阅，从控件方发送消息，那可以反向吗？比如UIAbility发送消息，控件那端订阅，获取消息。

解决方案：

你这种写法可以用日志打印出来看下。 可以，但EventHub需要上下文而emitter不需要，而上下文context的方法获取方式不一样。

在UIability中的写法是:

this.context.eventHub.on()//监听
this.context.eventHub.emit()//发送

在pages的组件中写法是:

getContext().eventHub.on()//监听
getContext().eventHub.emit()//发送

封装了一个工具类,只能通过真机来调试，demo代码如下: 工具类

import Emitter from '@ohos.events.emitter';

/**
 * `MyEmitterUtil` 是一个针对 HarmonyOS 的事件驱动编程封装类，主要用于组件间的通信和数据传递。
 *
 * 使用要求：
 *   - API 版本：api 11
 * 示例用法：
 * 1. 父组件绑定、解绑、向子组件发送事件：
 *    ```typescript
 *    aboutToAppear() {
 *      this.myEmitterUtil.onFather((eventData: EmitterData) => {
 *        console.info('父组件监听结果: ', JSON.stringify(eventData));
 *        // 判断事件类型并执行相应操作...
 *      });
 *    }
 *
 *    aboutToDisappear() {
 *      this.myEmitterUtil.offFather();
 *    }
 *
 *    // 向子组件发送事件
 *    this.myEmitterUtil.emitChild(MyEmitterUtil.UPDATE_DETAIL, "携带的测试数据");
 *    ```
 *
 * 2. 子组件绑定、解绑、向父组件发送事件：
 *    ```typescript
 *    aboutToAppear() {
 *      this.myEmitterUtil.onChild((eventData: EmitterData) => {
 *        console.info('子组件监听结果: ', JSON.stringify(eventData));
 *        // 判断事件类型并执行相应操作...
 *      });
 *    }
 *
 *    aboutToDisappear() {
 *      this.myEmitterUtil.offChild();
 *    }
 *
 *    // 向父组件发送事件
 *    this.myEmitterUtil.emitFather(MyEmitterUtil.UPDATE_LIST, "测试");
 *    this.myEmitterUtil.emitFather(MyEmitterUtil.UPDATE_LIST_2, "测试2");
 *    ```
 *
 * 参考文档：
 *   - 请查阅 HarmonyOS 开发文档了解详细信息。
 */

export class MyEmitterUtil {
  static readonly UPDATE_LIST = "UPDATE_LIST";
  static readonly UPDATE_LIST_2 = "UPDATE_LIST_2";
  static readonly UPDATE_DETAIL = "UPDATE_DETAIL";
  private static EVENT_ID_COUNTER: number = 0; // 自动递增，生成唯一的事件ID
  private readonly eventIdFather: number;
  private readonly eventIdChild: number;

  constructor() {
    this.eventIdFather = MyEmitterUtil.EVENT_ID_COUNTER++;
    this.eventIdChild = MyEmitterUtil.EVENT_ID_COUNTER++;
    console.info(`事件ID（父组件）: ${this.eventIdFather}`);
    console.info(`事件ID（子组件）: ${this.eventIdChild}`);
  }

  /**
   * 在组件的`aboutToAppear`生命周期钩子中调用，监听父组件事件
   * @param callback 事件回调函数，接受一个`EmitterData`对象作为参数
   */
  onFather(callback: (eventData: EmitterData) => void) {
    Emitter.on({ eventId: this.eventIdFather }, (event) => {
      if (event.data) {
        callback(new EmitterData(event.data.flag, event.data.data));
      }
    });
  }

  /**
   * 在组件的`aboutToDisappear`生命周期钩子中调用，解除父组件事件监听
   */
  offFather() {
    Emitter.off(this.eventIdFather);
  }

  /**
   * 在组件的`aboutToAppear`生命周期钩子中调用，监听子组件事件
   * @param callback 事件回调函数，接受一个`EmitterData`对象作为参数
   */
  onChild(callback: (eventData: EmitterData) => void) {
    Emitter.on({ eventId: this.eventIdChild }, (event) => {
      if (event.data) {
        callback(new EmitterData(event.data.flag, event.data.data));
      }
    });
  }

  /**
   * 在组件的`aboutToDisappear`生命周期钩子中调用，解除子组件事件监听
   */
  offChild() {
    Emitter.off(this.eventIdChild);
  }

  /**
   * 向父组件发送事件
   * @param flag 事件类型标识
   * @param data 事件携带的数据
   */
  emitFather(flag: string, data: string) {
    Emitter.emit(
      { eventId: this.eventIdFather, priority: Emitter.EventPriority.IMMEDIATE },
      { data: { flag, data } }
    );
  }

  /**
   * 向子组件发送事件
   * @param flag 事件类型标识
   * @param data 事件携带的数据
   */
  emitChild(flag: string, data: string) {
    Emitter.emit(
      { eventId: this.eventIdChild, priority: Emitter.EventPriority.IMMEDIATE },
      { data: { flag, data } }
    );
  }
}

/**
 * 用于封装事件数据的类
 */
export class EmitterData {
  flag: string = "";
  data: string = "";

  constructor(flag: string, data: string) {
    this.flag = flag;
    this.data = data;
  }
}

调用示例

import { MyEmitterUtil } from '../util/MyEmitterUtil'

@Component
struct MyView {
  @Prop controller: MyEmitterUtil
  @State info: string = ""

  aboutToAppear(): void {
    this.controller.onChild((eventData) => {
      console.info('====eventData', JSON.stringify(eventData))
      if (eventData.flag == "ABC") {
        this.info = eventData.data
      }
    })
  }

  build() {
    Column() {
      Text('子组件接收到的数据：' + this.info)
      Button('向父组件发送数据').onClick(() => {
        this.controller.emitFather("CCC", "EEE")
      })
    }
  }
}

@Entry
@Component
struct Page81 {
  controller: MyEmitterUtil = new MyEmitterUtil()
  @State info: string = ""

  aboutToAppear(): void {
    this.controller.onFather((eventData) => {
      console.info('====eventData', JSON.stringify(eventData))
      if (eventData.flag == "CCC") {
        this.info = eventData.data
      }
    })
  }

  build() {
    Row() {
      Column() {
        Text('父组件接收到的数据：' + this.info)
        Button('向子组件发送数据').onClick(() => {
          this.controller.emitChild("ABC", "conter")
        })
        MyView({ controller: this.controller })

      }
      .width('100%')
    }
    .height('100%')
  }
}