鸿蒙Next如何监听@consume变化

在鸿蒙Next开发中，如何监听@consume装饰的变量变化？当使用@consume装饰器标记的变量值发生改变时，有没有办法触发回调函数或者执行特定逻辑？希望能给出具体的代码示例和实现方法。

2 回复

鸿蒙Next里监听@Consume变化？简单！
在自定义组件里用[@Consume](/user/Consume)装饰变量，当@Provide的爹组件数据变了，[@Consume](/user/Consume)会自动触发UI更新。
代码示例：

[@Consume](/user/Consume) myData: number

别写监听函数，鸿蒙帮你搞定！就像外卖到了自动开门，不用你盯监控～

更多关于鸿蒙Next如何监听@consume变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以使用@Consume装饰器和@Provide装饰器配合实现状态管理。当@Consume装饰的变量变化时，UI会自动更新。以下是具体实现方法：

1. 基本用法

在父组件中使用@Provide，子组件中使用@Consume，通过状态绑定实现监听：

// 父组件
@Entry
@Component
struct ParentComponent {
  @Provide message: string = 'Hello'

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
      Button('Change Message')
        .onClick(() => {
          this.message = 'Hello Hongmeng!'
        })
      ChildComponent()
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  @Consume message: string

  build() {
    Column() {
      Text(`Consumed: ${this.message}`)
        .fontSize(20)
        .onClick(() => {
          this.message = 'Updated!'
        })
    }
  }
}

2. 监听变化

  • 当父组件的message变化时，所有使用@Consume绑定该变量的子组件都会自动更新
  • 在子组件中直接修改@Consume变量，会同步更新父组件的@Provide变量

3. 自定义监听

如需额外逻辑，可在组件内使用aboutToUpdate生命周期：

@Component
struct ChildComponent {
  @Consume message: string
  
  aboutToUpdate() {
    console.log('Message changed to:', this.message)
  }
}

注意事项：

  1. @Provide和@Consume支持跨层级组件通信
  2. 变量类型必须一致
  3. 避免循环更新导致性能问题

这种方式实现了响应式状态管理，无需手动监听，框架会自动处理依赖关系。

回到顶部