HarmonyOS状态管理：@Provide和@Consume的示例

“本文正在参加华为鸿蒙有奖征文征文活动”

参考官方文档：developer.huawei.com/consumer/cn…

@Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同

//变量名命名
@Provide jasonYin: string = 'jasonYin'
//别名命名
@Provide('alias') a: number = 0

• 双向同步
• @Provide和@Consume通过相同的变量名或者相同的变量别名绑定时，@Provide修饰的变量和@Consume修饰的变量是一对多的关系
• 不允许在同一个自定义组件内，包括其子组件中声明多个同名或者同别名的@Provide装饰的变量
• @Provide变量装饰器：允许装饰的变量类型：Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考观察变化。不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。
• @Consume变量装饰器：允许装饰的变量类型：Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考观察变化。不支持any，不允许使用undefined和null。必须指定类型。@Provide变量的@Consume变量的类型必须相同。

完整示例：

// Provide、Consume示例
@Entry
@Component
struct ProvideConsumePage {
  //变量名命名
  @Provide jasonYin: string = 'jasonYin'
  //别名命名
  @Provide('alias') a: number = 0

  build() {
    Column({ space: 10 }) {
      Text(`变量命名：${this.jasonYin}  别名命名：${this.a}`)
        .fontSize(20)
      Button('变量名命名')
        .onClick(() => {
          this.jasonYin = "jasonYin祖"
        })
      Button('别名命名')
        .onClick(() => {
          this.a = 666
        })
      Divider()
      ComA()
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')

  }
}

@Component
struct ComA {
  build() {
    ComB()
  }
}

@Component
struct ComB {
  @Consume jasonYin: string
  @Consume('alias') b: number

  build() {
    Column({ space: 10 }) {
      Text('ComB变量命名：' + this.jasonYin)
      Text(`ComB别名命名：${this.b}`)
      Button('ComB变量命名')
        .margin({ top: 10 })
        .onClick(() => {
          this.jasonYin = 'ComB点击了'
        })

      Button('ComB别名')
        .onClick(() => {
          this.b = 888
        })
    }

  }
}