【高心星出品】
V2 装饰器 @param 的使用
概念
在鸿蒙 ArkTS 开发中，@Param 装饰器是组件间状态管理的重要工具，主要用于父子组件间的单向数据传递，这一点与 V1 中的 @prop 类似。
@Param 装饰的变量支持本地初始化，但不允许在组件内部直接修改。
被 @Param 装饰的变量能够在初始化自定义组件时从外部传入，当数据源也是状态变量时，数据源的修改会同步给 @Param。
@Param 可以接受任意类型的数据源，包括普通变量、状态变量、常量、函数返回值等。
@Param 装饰的变量变化时，会刷新该变量关联的组件。
@Param 支持对基本类型（如 number、boolean、string、Object、class）、内嵌类型（如 Array、Set、Map、Date），以及 null、undefined 和联合类型进行观测。
对于复杂类型如类对象，@Param 会接受数据源的引用。在组件内可以修改类对象中的属性，该修改会同步到数据源。
@Param 的观测能力仅限于被装饰的变量本身。详见观察变化。
使用方法
数据流向单向同步（父组件 → 子组件），仅支持父组件数据源变化触发子组件更新。
适用条件 1
仅限 @ComponentV2 装饰的组件（API version 12+）。
子组件禁止直接修改 @Param 装饰的变量（需通过 @Once 或事件触发父组件修改）。
支持类型基本类型（number/boolean/string 等）、对象、数组、Date/Map/Set 等内嵌类型，以及 null/undefined 和联合类型。
案例
子组件中有一个按钮展示 @param 装饰的 count，但是不能更新本地的 count，父组件中有一个按钮展示 @local 装饰的 count，并且与子组件的 count 绑定，形成单向通信效果。点击父组件按钮会更新父子两者的组件显示数据。@require 配合 @param 会强制要求父组件初始化子组件数据。
@ComponentV2struct child { // 强制父组件传参 @Require @Param count:number // 父组件可以传参也可以不传参 // @Param count: number = 10
build() { Column() { Button('child count: ' + this.count) .width('60%') .onClick(() => { // 这里会报错，因为@param装饰的数据不能自己更新，需要让父组件更新 同步进来 // this.count+=1 }) } .width('100%') .padding(20) }}
@Entry@ComponentV2struct Parampage { @Local count: number = 10; build() { Column({ space: 20 }) { Button('page count: ' + this.count) .width('60%') .onClick(() => { this.count += 1 }) // child count与 父组件count单向绑定 child({ count: this.count }) } .height('100%') .width('100%') }}
复制代码
同步数据为数组的时候，子组件中可以修改数组元素，不能初始化整个数组，这里的修改会形成双向同步关系，下面案例里面点击两个按钮数据会同时变化。
@ComponentV2struct child2 { @Require @Param arr:number[]
build() { Column() { Button('child count: ' + this.arr[0]) .width('60%') .onClick(() => { // 不可以修改整个数组，但是可以修改数组元素 形成双向同步 this.arr[0]+=1 }) } .width('100%') .padding(20) }}
@Entry@ComponentV2struct Parampage1 { @Local arr:number[]=[1,2,3] build() { Column({ space: 20 }) { Button('page count: ' + this.arr[0]) .width('60%') .onClick(() => { this.arr[0]+=1 }) // child arr与 父组件arr单向绑定 child2({arr:this.arr }) } .height('100%') .width('100%') }}
复制代码
如果单向同步的数据是复杂的结构 info 类，在子组件中 @param 装饰的数据可以进行修改其属性并且会同步给父组件形成局部双向通信，
在下面案例中点击子组件按钮的时候 in 的 count 值已经发生了修改，父组件中的 count 也会修改，只不过 @param 和 @local 没有观察到，当先点击子组件按钮再点击父组件按钮的时候就会观察到两者显示 10--12--14 .
class info{ count:number constructor(count:number) { this.count=count }}
@ComponentV2struct child2 { @Require @Param in:info=new info(10)
build() { Column() { Button('child count: ' + this.in.count) .width('60%') .onClick(() => { // param不允许本地修改 // this.in=new info(11) // 允许修改对象的属性 并且会同步到父组件 形成有限制的双向同步 this.in.count+=1 }) } .width('100%') .padding(20) }}
@Entry@ComponentV2struct Parampage1 { @Local in:info=new info(10) build() { Column({ space: 20 }) { Button('page count: ' + this.in.count) .width('60%') .onClick(() => { this.in=new info(this.in.count+1) }) // child count与 父组件count单向绑定 child2({ in: this.in }) } .height('100%') .width('100%') }}
复制代码
评论