鸿蒙装饰器的介绍

State装饰器,

State装饰的变量,称为状态变量,与声明式范式中的其他被装饰变量一样,是私有的,只能从组件内部访问,在声明时,必须指定其类型和本地初始化。

Provide装饰器和@Consume装饰器,

其中@provide装饰的变量是在祖先节点中,可以理解为被'提供'给后代的状态变量。@Consume装饰的变量是在后代组件中,去绑定祖先节点提供的变量。

@Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定,变量类型必须相同

\ 复制代码
// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;

// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

实例

复制代码
// 孙组件
@Component
struct CountDownComponentB {
  @Consume count: number;
  build() {
    Column() {
      Text(`这是孙组件的值:${this.count},改变会影响到父组件。`)
      Row(){
        Button(`+1`).onClick(() => {
          this.count += 1
        })
        Button(`-1`).onClick(() => {
          this.count -= 1
        })
      }
      .justifyContent(FlexAlign.SpaceEvenly)
      .width("100%")
    }
  }
}

// 子组件
@Component
struct CountDownComponentA {
  build() {
    Column() {
      // 孙组件
      CountDownComponentB()
    }
  }
}


// 父组件
@Entry
@Component
struct ParentComponent {
  @Provide count: number = 10;

  build() {
    Column() {
      Text(`这是父组件的值:${this.count},改变会传给孙组件。`)
      Row(){
        Button(`+1`).onClick(() => {
          this.count += 1;
        })
        Button(`-1`).onClick(() => {
          this.count -= 1;
        })
      }
      .justifyContent(FlexAlign.SpaceEvenly)
      .width("100%")

      // 子组件
      CountDownComponentA()

    }
  }
}

watch装饰器:状态变量更改通知

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

当状态变量变化时,@watch回调方法将被调用。@watch在ARKUI框架内吧判断数值有无更新,使用的是严格相等===,当在严格相等为false的情况下,就会触发@watch的回调。

@watch可用于购物车计算总价,或者实现计算器功能等

(ChangedPropertyName?:string)=>void

建议开发者避免无限循环。循环可能是因为在@watch的回调方法里面直接或者间接地修改了同一个状态变量引起的,未来避免循环的产生,建议不要在@watch的回调方法里修改当前装饰的状态变量

/*

  • @Watch 修饰 状态数据
  • 函数中,不要修改被监视的状态变量。 我们要操作的是其他的业务逻辑
  • */
    @Entry
    @Component
    struct WatchDct {
    @State @Watch('change') count: number = 1
    @State @Watch('change') pow: number = 2
    @State res: number = 1

change() {

this.res = Math.pow(this.count, this.pow)

}

build() {

Row() {

Column() {

Text('基数:' + this.count)

.fontSize(50)

.onClick(() => {

this.count++

})

复制代码
    Divider()
    Text(`次幂:${this.pow}`)
      .fontSize(50)
      .onClick(() => {
        this.pow++
      })

    Divider()
    Text("结果:" + this.res)
      .fontSize(50)
  }
  .width('100%')
}
.height('100%')

}

}

相关推荐
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
爱奥尼欧1 小时前
【Linux 系统】基础IO——Linux中对文件的理解
linux·服务器·microsoft
戒不掉的伤怀1 小时前
【Navicat 连接MySQL时出现错误1251:客户端不支持服务器请求的身份验证协议;请考虑升级MySQL客户端】
服务器·数据库·mysql
超喜欢下雨天1 小时前
服务器安装 ros2时遇到底层库依赖冲突的问题
linux·运维·服务器·ros2
幽蓝计划2 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
搬码临时工2 小时前
小企业如何搭建本地私有云服务器,并设置内部网络地址提供互联网访问
运维·服务器
old-six-programmer2 小时前
NAT 类型及 P2P 穿透
服务器·网络协议·webrtc·p2p·nat
tan77º2 小时前
【Linux网络编程】网络基础
linux·服务器·网络
风口上的吱吱鼠2 小时前
Armbian 25.5.1 Noble Gnome 开启远程桌面功能
服务器·ubuntu·armbian
HMS Core3 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos