鸿蒙开发：浅入@Provider装饰器和@Consumer装饰器:跨组件层级双向同步

🎯 V2: 浅入@Provider装饰器和@Consumer装饰器:跨组件层级双向同步

⭐⭐⭐

📌 见解

1️⃣ @Provider和@Consumer接受可选参别名e，没有配置参数时，使用属性名作为默认的别名

2️⃣ @Provider和@Consumer能只支持本地初始化，不支持外部传入初始化

3️⃣ @Consumer是数据消费方通过查找最近相同绑定key的@Provider,当查找不到@Provider的数据时，使用本地默认值

4️⃣ @Provider和@Consumer需要配合组件之间的传递，所以有粘性，从组件耦合度的点出发，应少用@Provider和@Consumer

⚠️ 使用场景

@Provider和@Consumer用于跨组件层级数据双向同步

🧩 拆解

/**
 * @Provider和@Consumer可以装饰回调事件,用于组件之间完成行为抽象
 *
 * @Provider和@Consumer装饰复杂类型,配合@Trace一起使用
 *
 * !!! @Provider重名时,@Consumer向上查找其最近的@Provider
 *
 * 在子组件受用父组件用@Consumer获取的值会刷新或者初始化@Param装饰的值
 *
 */

@Entry
@ComponentV2
struct ProviderAndProviderCase {
  @Provider('name') name: string = '史迪黄'

  build() {
    Column() {
      ProviderAndProviderSon()
    }
  }
}

@ComponentV2
struct ProviderAndProviderSon {
  @Consumer('name') name: string = ''
  //  如果未使用别名绑定将使用默认值进行显示
  @Consumer('') age: number = 0

  build() {
    Column() {
      Text(`form father value${this.name}`)
        .onClick(() => {
          this.name = '小小黄'
        })
      Text(`my age is${this.age}`)

      // <---------------------->
      ProviderAndProviderParam({ name: this.name })
    }
    .size({ width: '100%', height: '100%' })
  }
}

@ComponentV2
struct ProviderAndProviderParam {
  @Param @Require name: string

  build() {
    Column() {
      Text(`form ProviderAndProviderSon value${this.name}`)
    }
    .size({ width: '100%', height: '100%s' })
  }
}

📝 @Provider和@Consumer属于状态管理V2装饰器，只能在V2的comments中使用

🌸🌼🌺