鸿蒙~@Watch装饰器的简单使用

状态变量更改通知

@Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变，可以使用@Watch为状态变量设置回调函数

• 父组件

import { login } from '../view/ComponentLogin';
import { TotalView } from '../view/Test';
import { Title } from '../view/Title';

@Entry
@Component
struct SharedTransitionSrc {
  @State count:number = 0
  build() {
    Column({space: 18}) {
       // Title()
       // login()

      TotalView({ count: this.count })
      Button("btn")
        .onClick(() => {
          this.count++
        })
    }

  }
}

• 子组件

@Component
export struct TotalView {
  @Link @Watch('onCountUpdated') count: number;
  @State total: number = 0;
  // @Watch 回调
  onCountUpdated(propName: string) {
    console.info("huxiubo", `count:${propName} ，vaule: ${this.count}`)
    this.total += this.count;
  }

  build() {
    Text(`Total: ${this.total}`)
  }
}