鸿蒙 Next 组件状态管理装饰器 V1

作者：auhgnixgnahz

2025-06-23
北京
本文字数：1719 字
阅读完需：约 6 分钟

使用装饰器实现数据变化，view 自动响应变化

常用的搭配有四种

State ：修饰的变量实现组件内的动态响应

父 State+子 PropLink：父子数据单向同步，父组件数据变化，父子组件都可以接收响应，子组件修改数据，父组件不会收到

父 State+子 Link：父子数据双向同步，父子组件的数据任何一个发生变化，view 都会响应变化

父 Provide+子 Consume：父组件与后台组件双向同步，初始化子布局时不需要传参，只需要在子组件声明相同变量名的参数就可以响应

Observed+父 State+子 ObjectLink：父子使用对象数据时的双向同步

@Entry@Componentstruct User{  @State userName:string='张三'  @State tall:string='170'  @Provide age:string='18'  @State person:Person = new Person('李四',20)  build() {    Column({space:20}){      Stack(){        Text('父组件 State 修饰：'+this.userName).fontSize(20).fontColor(Color.White)      }.alignContent(Alignment.Center)      .width('100%')      .height(60)      .backgroundColor(Color.Blue)      .onClick(()=>{         //是为了每次点击能发生数据变化        this.userName='点击了父组件 uaerName'+Math.floor(Math.random() * 11)      })      Stack(){        Text('父组件 State 修饰：'+this.tall).fontSize(20).fontColor(Color.White)      }.alignContent(Alignment.Center)      .width('100%')      .height(60)      .backgroundColor(Color.Green)      .onClick(()=>{        this.tall='点击了父组件 tall'      })      Stack(){        Text('父组件 Provide 修饰：'+this.age.toString()).fontSize(20).fontColor(Color.White)      }.alignContent(Alignment.Center)      .width('100%')      .height(60)      .backgroundColor(Color.Brown)      .onClick(()=>{        this.age='点击了父组件 age'      })      Stack(){        Text('父组件 State 修饰：'+this.person.name).fontSize(20).fontColor(Color.White)      }.alignContent(Alignment.Center)      .width('100%')      .height(60)      .backgroundColor(Color.Grey)      .onClick(()=>{        this.person.name='李思思'      })      Text('------下面是引用的子组件---------')
      child({userName:this.userName,tall:this.tall,person:this.person})    }  }}@Componentstruct child{  @Prop userName:string  @Link tall:string  @Consume age:string  @ObjectLink person:Person  build() {    Column({space:20}){      Stack(){        Text('子组件 Prop 修饰：'+this.userName).fontSize(20).fontColor(Color.White)      }.alignContent(Alignment.Center)      .width('100%')      .height(60)      .backgroundColor(Color.Blue)      .onClick(()=>{        this.userName='点击了子组件'      })      Stack(){        Text('子组件 Link 修饰：'+this.tall).fontSize(20).fontColor(Color.White)      }.alignContent(Alignment.Center)      .width('100%')      .height(60)      .backgroundColor(Color.Green)      .onClick(()=>{        this.tall='点击了子组件'      })      Stack(){        Text('子组件 Consume 修饰：'+this.age.toString()).fontSize(20).fontColor(Color.White)      }.alignContent(Alignment.Center)      .width('100%')      .height(60)      .backgroundColor(Color.Brown)      .onClick(()=>{        this.age='点击了子组件'      })      Stack(){        Text('子组件 ObjectLink 修饰：'+this.person.name).fontSize(20).fontColor(Color.White)      }.alignContent(Alignment.Center)      .width('100%')      .height(60)      .backgroundColor(Color.Grey)      .onClick(()=>{        this.person.name='李四'      })    }  }}
@Observedclass Person{   name:string=''   age:number=0  constructor(name:string,age:number) {     this.name=name;     this.age=age;  }}