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

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

常用的搭配有四种

State ：修饰的变量实现组件内的动态响应 父State+子PropLink：父子数据单向同步，父组件数据变化，父子组件都可以接收响应，子组件修改数据，父组件不会收到 父State+子Link：父子数据双向同步，父子组件的数据任何一个发生变化，view都会响应变化 父Provide+子Consume：父组件与后台组件双向同步，初始化子布局时不需要传参，只需要在子组件声明相同变量名的参数就可以响应 Observed+父State+子ObjectLink：父子使用对象数据时的双向同步

@Entry
@Component
struct 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})
    }
  }
}
@Component
struct 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='李四'
      })
    }
  }
}

@Observed
class Person{
   name:string=''
   age:number=0
  constructor(name:string,age:number) {
     this.name=name;
     this.age=age;
  }
}