当前位置：首页 > news >正文

Harmony状态管理@Event

news 2025/6/25 17:34:36

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

概述

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

核心功能

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

允许子组件通过回调方法向父组件请求数据更新
配合@Param装饰器实现父子组件间的数据双向同步
通过@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; // 接收子组件的修改请求}})}}
}

关键特性

回调方法规范：
- @Event装饰的回调方法参数和返回值由开发者自由定义
- 当@Event没有初始化时，会自动生成一个空函数作为默认回调
- 如果本地有默认值，会使用本地默认函数处理
同步机制：
- 使用@Event修改父组件的值是立即生效的
- 但从父组件同步回子组件的过程是异步的
- 在调用@Event方法后，子组件内的值不会立刻变化
装饰器组合：
- @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)}})})}}
}