HarmonyOS鸿蒙学习笔记（6） @Consume和@Provide作用说明和简单案例

这两个标签在HarmonyOS中很重要，官方文档对其解释是：Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。
下面写个简单的demo代码来理解下，代码如下，注意@Provide修饰的变量，并不需要通过类似Java的set或者构造器的方式赋值给@Consume的变量，只需要保持两者的变量名一样即可。：

@Entry
@Component
struct ProvidePage {
  @Provide count: number = 1
  build() {
    Column() {
      //蓝色数字
      Text(`${this.count}`).fontColor(Color.Blue).fontSize(30)
      //使用ConsumeComponent的时候并没有将ProvidePage.count传给ConsumeComponent
      ConsumeComponent()
    }.height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)

  }
}

@Component
struct ConsumeComponent {
  //变量名要跟@Provide一样
  @Consume count: number
  build() {
    Column() {
      //红色数字
      Text(this.count.toString()).fontSize(30)
        .fontColor(Color.Red).margin({ top: 30 })
      //点击+1
      Text("点击+1").fontSize(30).onClick(() => {
        this.count++
      }).margin({ top: 30 })
    }

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

运行效果如下：

然后点击三次“点击+1”按钮，会自动刷新页面，效果如下：

同理，我们将 @Provide修饰的变量进行count++操作，效果也一样ProvidePage 改造如下，为Text新增点击事件：

@Entry
@Component
struct ProvidePage {
  @Provide count: number = 1
  build() {
    Column() {
      //蓝色数字
      Text(`${this.count}`).fontColor(Color.Blue).fontSize(30)
        .onClick(() => {
        this.count++
      })
      ConsumeComponent()
    }.height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

经过测试发现：
1、当我们点击上面的蓝色Text的时候执行count++，比如此时count=2；再点击“点击+1”按钮，count就会在2的基础上+1.而变成了3，蓝色Text和红色Text此时都展示3；
2、同理，我们点击下面的“点击+1”按钮进行count++，假设count=3，那么再点击蓝色Text,此时count就在3的基础上+1.数字变成4,Text和红色Text此时都展示4；

注意@Provide修饰的变量，并不需要通过类似Java的set或者构造器的方式赋值给@Consume的变量，只需要保持两者的变量名一样即可。
事实上，HarmonyOs也提供了一个@Link也可以实现上述效果，感兴趣的读者可以阅读博主HarmonyOS鸿蒙学习笔记（12）@Link的作用一文了解一下。
参考资料：

Consume和Provide官方资料