> 文档中心 > HarmonyOS鸿蒙学习笔记(6) @Consume和@Provide作用说明和简单案例

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

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

@Entry@Componentstruct 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)  }}@Componentstruct 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 })    }  }}

运行效果如下:
HarmonyOS鸿蒙学习笔记(6) @Consume和@Provide作用说明和简单案例
然后点击三次“点击+1”按钮,会自动刷新页面,效果如下:
HarmonyOS鸿蒙学习笔记(6) @Consume和@Provide作用说明和简单案例
同理,我们将 @Provide修饰的变量进行count++操作,效果也一样ProvidePage 改造如下,为Text新增点击事件:

@Entry@Componentstruct 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、当我们点击上面的蓝色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的变量,只需要保持两者的变量名一样即可。
参考资料:

Consume和Provide官方资料

局座张召忠