在HarmonyOS NEXT中 @Provider与@Consume的数据交互方式？

Question

在HarmonyOS NEXT中 @Provider与@Consume的数据交互方式？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

@Provide装饰器和@Consume装饰器，可以实现与后代组件双向同步。不需要逐层传递回祖先。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...

@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 CompA { 
  // @Provide装饰的变量reviewVotes由入口组件CompA提供其后代组件 
  @Provide reviewVotes: number = 0; 
 
  build() { 
    Column() { 
      Button(`reviewVotes(${this.reviewVotes}), give +1`) 
        .onClick(() => this.reviewVotes += 1) 
      CompB() 
    } 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 2

在数据提供组件中，使用@Provider装饰一个数据属性。假设我们有一个简单的计数器应用，CounterProvider组件提供计数器的值。

import { Provider } from '@ohos.application.Component';
@Component
class CounterProvider {
    @Provider counter: number = 0;
    increment() {
        this.counter++;
    }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。