ArkTS @Consume和@Provide装饰器的用法（附带实例）

设想这样一种场景，有 3 个及以上的组件层级，类似于如下图所示的组件层级。

图 1 组件层级

如果子组件 3 要访问根组件的某个变量，我们应该如何去做呢？此时的想法可能是将根组件的变量传递给子组件 1，然后从子组件 1 传递给子组件 2，最后从子组件 2 传递给子组件 3。虽然这样可以实现我们的目的，但是设想一下，如果组件的嵌套层次达到 100 层呢。

对此，HarmonyOS 提供了两个装饰器 @Consume 和 @Provide，主要用于在多个层级之间传递数据的场景。

这种双向数据同步的机制为开发者提供了一种优雅的方式来管理状态数据的流动，尤其适用于多层级的父子组件之间的数据传递。

@Consume 和 @Provide 装饰器特性如下：

@Provide 装饰的变量位于祖先节点中，被提供给后代组件，可以看作“提供”给后代的状态变量；
@Consume 装饰的变量位于后代组件中，用于“消费（绑定）”祖先节点提供的变量。

接下来通过案例来掌握这两个装饰器的具体使用场景。在案例中，单击根组件的按钮可以修改变量的数据，同时单击 @Consume 装饰的后代组件中的按钮依旧可以修改此变量，具体代码示例以及代码解释如下图所示。

图 2 代码示例

完整代码如下：

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

  build() {
    Column() {
      Button(`CompA 组件数据：${this.count}`)
        .onClick(() => this.count += 1);

      CompB();
    }
  }
}

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

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

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

  build() {
    Column() {
      Text(`CompD 组件数据 ${this.count}`);
      Button('CompD 组件按钮')
        .onClick(() => this.count += 1);
    }
    .width('50%');
  }
}

ArkTS @Consume和@Provide装饰器的用法（附带实例）

相关文章