《鸿蒙第一行代码》第十一课 状态管理Provide和Consume

《鸿蒙第一行代码》第十一课 状态管理Provide和Consume

• @Provide是提供者，需初始化
• @Consume是消费者，不能初始化。
• 它们往往是成对出现，成对出现时，它们的值是相同的，相会影响。
• 也可以单独有@Provide，但不能单独有@Consume。

应用场景： 在那种左右联动列表中常用，比如省份和城市联动选择框，月份和日联动选择框

简单示例代码：

@Component
struct CompD {
  // @Consume装饰的变量通过相同的属性名绑定其祖先组件CompA内的@Provide装饰的变量
  @Consume reviewVotes: number ;

  build() {
    Column() {
      Text(`reviewVotes(${this.reviewVotes})`)
      Button(`reviewVotes(${this.reviewVotes}), give +1`)
        .onClick(() => this.reviewVotes += 1)
    }
    .width('50%')
  }
}

@Component
struct CompC {
  build() {
    Row({ space: 5 }) {
      CompD()
      CompD()
    }
  }
}

@Component
struct CompB {
  build() {
    CompC()
  }
}

@Entry
@Component
struct Provide_Consume_Modifier {
  // @Provide装饰的变量reviewVotes由入口组件CompA提供其后代组件
  @Provide reviewVotes: number = 0;

  build() {
    Column() {
      Button(`reviewVotes(${this.reviewVotes}), give +1`)
        .onClick(() => this.reviewVotes += 1)
      CompB()
    }
  }
}

《鸿蒙第一行代码》项目代码结构图：

有需要《鸿蒙第一行代码》项目源码的私信我，我每天都看私信的