HarmonyOS鸿蒙Next中ArkUI怎么给自定义组件添加自定义事件

这个问题和我的这个帖子问的是一个问题：https://developer.huawei.com/consumer/cn/forum/topic/0203140558485624044?fid=0101587866109860105&pid=0304140632673644579。

我目前的解法是自己写了个事件的发布订阅机制来解决。可以解决，但很蛋疼，简单问题搞复杂了。

订阅事件：

import router from '@ohos.router';
import { PageTitle } from './../../../common/components/page-title';
import { FruitList } from './comps/fruit-list';
import { getFruitData } from './utils/mock';
import { RegEventManger } from '../../../common/utils/event';
import { FruitData } from './type';

enum RegEvents {
  RefreshIconClick = 'onRefreshIconClick',
  BackIconClick = 'onBackIconClick',
}

@Entry
@Component
struct RankingList {
  @State isRefreshing: boolean = false;
  @State fruitData: FruitData[] = [];
  private eventManger: RegEventManger;

  // 声明周期处理函数 ---------------------------------------
  async aboutToAppear() {
    this.eventManger = new RegEventManger(this, {
      [RegEvents.RefreshIconClick]: this.onRefreshIconClick,
      [RegEvents.BackIconClick]: this.onBackIconClick,
    });

    this.loadFruitData();
  }

  aboutToDisappear() {
    this.eventManger.delAllListeners();
  }
  
  build() {
    Column() {
      PageTitle({
        title: '排行榜',
        showRefresh: true,
        isRefreshing: this.isRefreshing,
        backEventName: RegEvents.BackIconClick as string,
        refreshEventName: RegEvents.RefreshIconClick as string
      })

      if (this.isRefreshing) {
        Text('loading...');
      } else {
        FruitList({
          isLoading: this.isRefreshing,
          fruitData: this.fruitData
        })
      }
    }.useRootStyles()
  }
}

抛出事件：

// @Preview({ title: 'PageTitle' })
import { fireEvent } from '../../utils/event';
import router from '@ohos.router';

@Component
export struct PageTitle {
  @Prop title: string;
  @Prop refreshEventName: string = '';
  @Prop backEventName: string = '';
  @Prop isRefreshing: boolean = false;
  @Prop showRefresh: boolean = true;

  onRefreshIconClick() {
    if (this.refreshEventName) {
      fireEvent(this.refreshEventName, []);
    }
  }

  onBackIconClick() {
    if (this.backEventName) {
      fireEvent(this.backEventName, []);
    } else {
      router.back();
    }
  }

  build() {
    Row(){
      Row(){
        Image($r('app.media.ic_public_back'))
          .onClick(() => this.onBackIconClick())
          .bindBackIconStyles()

        Text(this.title).bindTitleStyles()
      }

      if (this.showRefresh) {
        Row(){
          Image($r('app.media.loading'))
            .onClick(() => this.onRefreshIconClick())
            .bindRefreshIconStyles()
        }
      }
    }.bindRootStyles()
  }
}

// 样式部分 -------------------------------------
@Extend(Row) function bindRootStyles() {
  .justifyContent(FlexAlign.SpaceBetween)
  .padding({ left: 10, right: 10 })
  //.backgroundColor('#0f0')
  .width('100%')
  .height(47)
}

@Extend(Image) function bindBackIconStyles() {
  .margin({right: 18})
  .width(21)
  .height(28)
}

@Extend(Text) function bindTitleStyles() {
  .fontSize(20)
}

@Extend(Image) function bindRefreshIconStyles() {
  .width(22)
  .height(22)
}