HarmonyOS鸿蒙Next中自定义组件如何开放事件/属性设置方法

自定义组件HSCell中自定义事件tapEvent，通过点击修改数据，实现UI状态的变化。

@Observed
class HSItemData {
  choose: boolean = false
  constructor(choose: boolean) {
    this.choose = choose
  }
}
@Observed
class HSTestDataModel {
  itemArray: Array<HSItemData> = new Array()
  constructor(itemArray: HSItemData[]) {
    this.itemArray = itemArray
  }
}
@Component
struct HSCell {
  @ObjectLink itemData: HSItemData
  tapEvent?: (item: HSItemData) => void
  build() {
    Row() {
      if (this.itemData.choose) {
        Text("选中")
      } else {
        Text("未选中")
      }
    }
    .backgroundColor(Color.Pink)
    .onClick(() => {
      if (this.tapEvent) {
        this.tapEvent(this.itemData)
      }
    })
    .margin({ bottom: 10 })
    .width('100%')
    .height(68)
}
@Entry
@Component
export struct HSTestPage {
  listeners: DataChangeListener[] = []
  @State dataModel: HSTestDataModel = new HSTestDataModel([])
  aboutToAppear(): void {
    for (let i = 0; i < 10; i++) {
      this.dataModel.itemArray.push(new HSItemData(false))
    }
  }
  build() {
    Column() {
      List() {
        LazyForEach(this, (item: HSItemData, index) => {
          HSCell({
            itemData: item, 
            tapEvent: () => {
              item.choose = !item.choose
            }
          })
        }, (item: string) => item.toString())
      }
    }
    .height('100%')
  }
  totalCount() {
    return this.dataModel.itemArray.length
  }
  getData(index: number) {
    return this.dataModel.itemArray[index]
  }
  registerDataChangeListener(listener: DataChangeListener) {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }
  unregisterDataChangeListener(listener: DataChangeListener) {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }
  reloadTableView(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }
}

在HarmonyOS Next中，自定义组件开放事件和属性设置方法主要通过以下步骤实现：

1. 定义属性：在自定义组件的Component类中，使用[@State](/user/State)、@Prop、@Link等装饰器定义组件的属性。例如：

   [@State](/user/State) private myProperty: string = 'default';

2. 定义事件：通过[@Emit](/user/Emit)装饰器定义事件，使得父组件可以监听子组件的事件。例如：

   [@Emit](/user/Emit)('myEvent')
   private emitMyEvent(): void {
       // 触发事件
   }

3. 暴露方法：在自定义组件中定义公共方法，通过[@Method](/user/Method)装饰器暴露给外部调用。例如：

   [@Method](/user/Method)
   public setProperty(value: string): void {
       this.myProperty = value;
   }

4. 组件使用：在父组件中使用自定义组件时，可以通过属性绑定和事件监听来设置属性和处理事件。例如：

   <MyComponent myProperty={this.myValue} onMyEvent={this.handleMyEvent} />

5. 生命周期管理：确保在组件的生命周期方法中正确处理属性和事件的变化，避免内存泄漏和不必要的更新。

通过这些步骤，自定义组件可以有效地开放事件和属性设置方法，供外部组件使用。