【高心星出品】
V2装饰器@Event的使用
概念
由于@Param装饰的变量在本地无法更改，使用@Event装饰器装饰回调方法并调用，可以实现更新数据源的变量，再通过@Local的同步机制，将修改同步回@Param，以此达到主动更新@Param装饰变量的效果。
@Event用于装饰组件对外输出的方法：
- @Event装饰的回调方法中参数以及返回值由开发者决定。
- @Event装饰非回调类型的变量不会生效。当@Event没有初始化时，会自动生成一个空的函数作为默认回调。
- 当@Event未被外部初始化，但本地有默认值时，会使用本地默认的函数进行处理。
@Param标志着组件的输入，表明该变量受父组件影响，而@Event标志着组件的输出，可以通过该方法影响父组件。使用@Event装饰回调方法是一种规范，表明该回调作为自定义组件的输出。父组件需要判断是否提供对应方法用于子组件更改@Param变量的数据源。
装饰器说明
| @Event属性装饰器 | 说明 |
|---|---|
| 装饰器参数 | 无。 |
| 允许装饰的变量类型 | 回调方法，例如()=>void、(x:number)=>boolean等。回调方法是否含有参数以及返回值由开发者决定。 |
| 允许传入的函数类型 | 箭头函数。 |
-
通信桥梁 @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)触发父组件逻辑
less
@ComponentV2
struct 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
@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
- 点击按钮触发回调函数向父组件传递参数
less
@ComponentV2
struct 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
@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应用中灵活的数据流控制。