一、@State

作用：装饰变量，变量的值改变会引起UI更新

@State必要指定类型，并且必须初始化

@State num：number=0

二、@Prop

作用：父子组件之间单向的数据传递

@Prop  count:string='123'

注意点：1、可以初始化也可以省略

@Prop count：Partial<string>=''

2、如果初始化省略，默认值是undefined

3、父组件的变量名和传递给子组件的属性名必须一致

子组件向父组件传递数据，传递的是回调函数

// 定义接口
interface User {
  name: string
  age: number
}
//子组件
@Component
struct SonCom {
  //定义变量 接受父组件传递过来的值
  @Prop sonInfo:string
  //定义变量接受父组件传递过来的复杂类型
  @Prop sonUser:Partial<User>={}

//给父组件传递的回调函数
  fun=(text:string)=>{}

  build() {
    Column({ space: 5 }) {
      Text('我是子组件')
        .fontSize(20)
        .fontWeight(600)
      Text(this.sonInfo)
        .onClick(()=>{
          this.fun('aaaa')
        })
      Text(this.sonUser.name+'-'+this.sonUser.age)
    }
    .padding(10)
    .backgroundColor(Color.Pink)
    .borderRadius(10)
  }
}

//父组件
@Entry
@Component
struct Page06_PropUse {
  @State info: string = '父组件定义的文本'
  @State user:User={name:'aaa',age:34}

  build() {
    Column({ space: 10 }) {
      Text('我是父组件-橘色那个')
        .fontSize(30)
        .fontWeight(600)

      //父组件接受子组件传递过来的函数
      SonCom({sonInfo:this.info,sonUser:this.user,fun:(text:string)=>{
        this.info=text
      }})
    }
    .padding(20)
    .backgroundColor(Color.Orange)
    .width('100%')
    .height('100%')
  }
}

三、@ObjectLink&&@Observed

作用：解决嵌套数据响应式更新问题

只能修饰类

interface Person {
  id: number
  name: string
  age: number
}
//一、定义类，用@observed装饰类，并constructor初始化类
@Observed
class  Iperson{
  id: number
  name: string
  age: number
  constructor(id: number, name: string, age: number) {
    this.id = id
    this.name = name
    this.age = age
  }
}


@Entry
@Component
struct Page01_ObservedObjectLink {
  @State personList: Iperson[] = [
    //二、实例化类 如果数据是对象就把对象放到实例化类中
    new Iperson(1,'张三',18),
    new Iperson(2,'李四',19),
    new Iperson(3,'王五',20),

    // {
    //   id: 1,
    //   name: '张三',
    //   age: 18
    // },
    // {
    //   id: 2,
    //   name: '李四',
    //   age: 19
    // },
    // {
    //   id: 3,
    //   name: '王五',
    //   age: 20
    // }
  ]

  build() {
    Column({ space: 20 }) {
      Text('父组件')
        .fontSize(30)
      List({ space: 10 }) {
        ForEach(this.personList, (item: Person, index: number) => {
          ItemCom({
            info: item,
            // addAge: () => {
            //   item.age++
            //   this.personList.splice(index, 1, item)
            // }
          })
        })
      }

    }
    .backgroundColor('#cbe69b')
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

@Component
struct ItemCom {
  // @Prop info: Person//单向的，只修改了子组件的数据，如果父组件数据更改，子组件修改的数据会被父组件修改的数据覆盖，@prop是深拷贝，拷贝的是值
  //三、定义接受父组件传递过来的数据
  //@ObjectLink:1、不能初始值，2、可以将数据同步给父组件，实现数据的双向绑定  //@objectlink是浅拷贝，拷贝的是地址

  @ObjectLink info:Iperson

  build() {
    ListItem() {
      Row({ space: 10 }) {
        Text('姓名:' + this.info.name)
        Text('年龄:' + this.info.age)
        Blank()
        Button('修改数据')
          .onClick(() => {
            //四、直接修改
            this.info.age++
          })
      }
      .backgroundColor(Color.Pink)
      .padding(10)
      .width('100%')
    }
  }
}

四、@Link

​​​作用：父子之间双向的数据传递

语法：@Link 变量：类型

注意：@Link 不能自己初始化，也不可以接受ForEach传递的数据

五、@provide&&@Consume

作用：用于跨组件之间数据传递，父组件通过@Provide传递，子组件通过@Consume接受

语法：@Provide  变量：类型=值

          @Consume  变量：类型      或者      @Consume  （'变量'）别名：类型

注意：@Consume不可以自己初始化

           @Provide和@Consume的变量名必须一致

六、@Watch

作用：用来监听数据是否变化

语法：装饰器   @Watch （'方法名'） 变量：类型=值

           方法名（）{操作的业务}

注意：1、@Watch不能单独使用，要和装饰器配合使用

           2、变量值更改才会触发函数执行

private count: number = 0;

setCount(newValue: number) {
  this.count = newValue;
  this.countChanged();
}

private countChanged() {
  // 处理变化
}