Harmony状态管理@Event

ArkUI @Event装饰器：实现子组件向父组件通信的规范方式

概述

@Event装饰器是ArkUI框架中用于规范组件间通信的重要工具，特别是在需要子组件向父组件请求更新@Param变量的场景下。它通过回调机制实现数据的双向同步，是组件化开发中不可或缺的一部分。

核心功能

@Event装饰器主要实现以下功能：

1. 允许子组件通过回调方法向父组件请求数据更新
2. 配合@Param装饰器实现父子组件间的数据双向同步
3. 通过@Local同步机制将修改后的值异步同步回子组件的@Param变量

基本用法

@ComponentV2
struct ChildComponent {
  @Param title: string = '';
  @Event changeTitle: (newTitle: string) => void = () => {};
  
  build() {
    Column() {
      Text(this.title)
      Button('修改标题')
        .onClick(() => {
          this.changeTitle('新标题'); // 触发父组件回调
        })
    }
  }
}

@Entry
@ComponentV2
struct ParentComponent {
  @Local title: string = '初始标题';
  
  build() {
    Column() {
      ChildComponent({
        title: this.title,
        changeTitle: (newTitle: string) => {
          this.title = newTitle; // 接收子组件的修改请求
        }
      })
    }
  }
}

关键特性

1. 回调方法规范：
   • @Event装饰的回调方法参数和返回值由开发者自由定义
   • 当@Event没有初始化时，会自动生成一个空函数作为默认回调
   • 如果本地有默认值，会使用本地默认函数处理
2. 同步机制：
   • 使用@Event修改父组件的值是立即生效的
   • 但从父组件同步回子组件的过程是异步的
   • 在调用@Event方法后，子组件内的值不会立刻变化
3. 装饰器组合：
   • @Event必须与@Param配合使用
   • 通常与@Local一起实现完整的数据流

实际应用示例

// 待办事项子组件
@ComponentV2
struct TaskItem {
  @Param taskName: string = '';
  @Param @Once isFinish: boolean = false;
  @Event deleteTask: () => void = () => {};
  
  build() {
    Row() {
      Image(this.isFinish ? 'finished.png' : 'unfinished.png')
      Text(this.taskName)
      Button('删除')
        .onClick(() => this.deleteTask())
    }
  }
}

// 父组件
@Entry
@ComponentV2
struct TodoList {
  @Local tasks: string[] = ['任务1', '任务2', '任务3'];
  
  build() {
    Column() {
      Repeat(this.tasks)
        .each((item: string) => {
          TaskItem({
            taskName: item,
            deleteTask: () => {
              this.tasks.splice(this.tasks.indexOf(item), 1)
            }
          })
        })
    }
  }
}

注意事项

1. @Event只能用在@ComponentV2装饰的自定义组件中
2. 装饰非方法类型的变量时不会有任何作用
3. 在非@ComponentV2组件中使用会编译报错
4. 修改父组件值后，子组件更新是异步的，不能立即获取新值

总结

@Event装饰器为ArkUI提供了一种规范的子父组件通信机制，使得数据流更加清晰可控。通过@Event、@Param和@Local的配合使用，开发者可以轻松实现复杂的组件交互逻辑，同时保持代码的可维护性和可读性。