唐山建设网站公司域名停靠网页app推广大全

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的配合使用，开发者可以轻松实现复杂的组件交互逻辑，同时保持代码的可维护性和可读性。