鸿蒙 5.0 项目开发——V2 装饰器 @Event 的使用

作者：高心星

2025-09-16
江苏
本文字数：1993 字
阅读完需：约 7 分钟

【高心星出品】

V2 装饰器 @Event 的使用

概念

由于 @Param 装饰的变量在本地无法更改，使用 @Event 装饰器装饰回调方法并调用，可以实现更新数据源的变量，再通过 @Local 的同步机制，将修改同步回 @Param，以此达到主动更新 @Param 装饰变量的效果。

@Event 用于装饰组件对外输出的方法：

@Event 装饰的回调方法中参数以及返回值由开发者决定。
@Event 装饰非回调类型的变量不会生效。当 @Event 没有初始化时，会自动生成一个空的函数作为默认回调。
当 @Event 未被外部初始化，但本地有默认值时，会使用本地默认的函数进行处理。

@Param 标志着组件的输入，表明该变量受父组件影响，而 @Event 标志着组件的输出，可以通过该方法影响父组件。使用 @Event 装饰回调方法是一种规范，表明该回调作为自定义组件的输出。父组件需要判断是否提供对应方法用于子组件更改 @Param 变量的数据源。

装饰器说明

通信桥梁 @Event 装饰的回调方法作为子组件的“输出口”，允许子组件主动触发父组件逻辑。当子组件需要修改父组件传递的 @Param 变量时（由于 @Param 本地不可直接修改），通过调用 @Event 装饰的方法通知父组件更新数据源。
与 @Param 的协作
父组件通过 @Param 传递数据给子组件
子组件通过 @Event 回调请求父组件修改数据源
父组件更新后的数据通过 @Local 同步机制回传给子组件

应用场景

表单输入组件子组件（如自定义输入框）通过 @Event 将用户输入实时同步到父组件数据源。
状态联动更新当多个子组件需要基于同一父级状态协同变化时，通过事件回调统一管理状态。
动态配置传递父组件传递初始配置后，子组件通过事件回调请求调整配置参数。

案例

双向同步案例。

父组件结构（Eventpage）：

使用 @Local 管理状态变量 count
通过 eventchild({count: this.count, cb: ...})向子组件传递数据与回调
在回调函数内通过 this.count += val 响应子组件事件

子组件结构（eventchild）：

通过 @Param count: number 接收父组件的状态
通过 @Event cb: (val: number) => void 定义事件回调接口
点击按钮时通过 this.cb(2)触发父组件逻辑

@ComponentV2struct eventchild{  @Require @Param count:number  @Event cb:(val:number)=>void  build() {    Column(){      Button('child count: '+this.count)        .width('60%')        .onClick(()=>{          // @param不允许直接更新count          // this.count++          // 可以通过@event对外暴漏一个出口，间接让父组件更新父组件的变量          this.cb(2)        })    }    .width('100%')    .padding(20)  }}
@Entry@ComponentV2struct Eventpage {  @Local count: number = 10;
  build() {    Column(){     Button('page count: '+this.count)       .width('60%')       .onClick(()=>{         this.count++       })      // 重写@event函数      eventchild({count:this.count,cb:(val:number)=>{        // 更新父组件的count  会同步到子组件        this.count+=val      }})    }    .height('100%')    .width('100%')  }}

复制代码

单向同步案例，并且是子控制父，父无法控制子。

父组件结构：

使用 @Local 装饰器定义响应式数组 arr，并通过按钮点击事件修改数组第一个元素
通过 eventchild1 子组件传递处理后的数组（使用[...this.arr]进行解构）和事件回调函数

子组件结构：

通过 @Param 接收父组件传递的数组
通过 @Event 定义事件回调接口 cb
点击按钮触发回调函数向父组件传递参数

@ComponentV2struct eventchild1{  @Require @Param arr:number[]  @Event cb:(val:number)=>void  build() {    Column(){      Button('child count: '+this.arr[0])        .width('60%')        .onClick(()=>{          // 双向同步关系          // this.arr[0]++          // 单向同步关系，子组件能控制父组件的显示，父组件不会同步过来          // 使用的深度拷贝 没有引用          this.cb(1)        })    }    .width('100%')    .padding(20)  }}
@Entry@ComponentV2struct Eventpage1 {  @Local arr: number[] = [1,2,3];
  build() {    Column(){      Button('page count: '+this.arr[0])        .width('60%')        .onClick(()=>{          this.arr[0]++        })      // 重写@event函数      // 现在子组件和父组件都是使用数组的引用，建立双向同步      // 同时改变      // eventchild1({arr:this.arr,cb:(val:number)=>{      //   this.arr[0]+=val      // }})      // 单向同步关系，子组件能控制父组件的显示，父组件不会同步过来      // 使用的深度拷贝 没有引用      eventchild1({arr:[...this.arr],cb:(val:number)=>{        this.arr[0]+=val      }})    }    .height('100%')    .width('100%')  }}

复制代码

通过合理运用 @Event，开发者能构建出高内聚、低耦合的组件化架构，实现 ArkTS 应用中灵活的数据流控制。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/b01b63b423aef1d158e30c6a4】。文章转载请联系作者。

高心星

关注

天将降大任于斯人也，必先苦其心志。 2024-10-17 加入

华为开发者专家（HDE）。 10年教学经验，兼任多家科技公司技术顾问。先后从事JavaEE项目开发、Python爬虫、HarmonyOS移动应用开发等课程的教学工作。参与开发《鸿蒙应用开发基础》和《鸿蒙项目实战》等课程。

发布

暂无评论

创作场景

鸿蒙 5.0 项目开发——V2 装饰器 @Event 的使用

V2 装饰器 @Event 的使用

概念

装饰器说明

应用场景

案例

高心星

评论