鸿蒙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等。回调方法是否含有参数以及返回值由开发者决定。
允许传入的函数类型	箭头函数。

通信桥梁 @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应用中灵活的数据流控制。