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

【高心星出品】

V2装饰器@Event的使用

概念

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

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

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

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

装饰器说明

@Event属性装饰器	说明
装饰器参数	无。
允许装饰的变量类型	回调方法，例如()=>void、(x:number)=>boolean等。回调方法是否含有参数以及返回值由开发者决定。
允许传入的函数类型	箭头函数。

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

应用场景

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

案例

双向同步案例。

父组件结构（Eventpage）：

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

子组件结构（eventchild）：

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

@ComponentV2
struct eventchild{@Require @Param count:number@Event cb:(val:number)=>voidbuild() {Column(){Button('child count: '+this.count).width('60%').onClick(()=>{// @param不允许直接更新count// this.count++// 可以通过@event对外暴漏一个出口，间接让父组件更新父组件的变量this.cb(2)})}.width('100%').padding(20)}
}@Entry
@ComponentV2
struct 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
• 点击按钮触发回调函数向父组件传递参数

@ComponentV2
struct eventchild1{@Require @Param arr:number[]@Event cb:(val:number)=>voidbuild() {Column(){Button('child count: '+this.arr[0]).width('60%').onClick(()=>{// 双向同步关系// this.arr[0]++// 单向同步关系，子组件能控制父组件的显示，父组件不会同步过来// 使用的深度拷贝 没有引用this.cb(1)})}.width('100%').padding(20)}
}@Entry
@ComponentV2
struct 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应用中灵活的数据流控制。