当前位置: 首页 > news >正文

鸿蒙装饰器的介绍

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%')

}
}

http://www.lryc.cn/news/426418.html

相关文章:

  • 零基础5分钟上手亚马逊云科技核心云架构知识 - 权限管理最佳实践
  • [数据库][知识]SQL Server、MySQL 和 Oracle 的默认端口和数据库链接
  • 【Unity教程】使用 Animation Rigging实现IK制作程序化的动画
  • OBS混音器(Mixers)的重要性和配置指南
  • Ubuntu安装Anaconda3
  • 数据类型解码:INT、VARCHAR、DATETIME的深度解析与实践
  • 基于单片机的智能晾衣系统设计
  • Python实战项目:天气数据爬取+数据可视化(完整代码)
  • 知识改变命运 数据结构【链表面试题】
  • 计算机毕业设计 医院问诊系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
  • 掌握CSS的:any-link伪类:统一链接样式的高效方法
  • 虚幻5|角色武器装备的数据库学习(不只是用来装备武器,甚至是角色切换也很可能用到)
  • 防火墙技术与地址转换
  • C++11中的Lambda表达式
  • Unity图形系统
  • Ceph篇之利用shell脚本实现批量创建bucket桶
  • 周末总结(2024/08/17)
  • SQL高级编程:掌握自定义函数和过程的艺术
  • python监听环境内是否有声音
  • 合并两个有序链表--力扣
  • 【自用】Python爬虫学习(三):图片下载、使用代理、防盗链视频下载、多线程与多进程
  • #Datawhale AI夏令营第4期#AIGC方向Task3
  • 【docker综合篇】关于我用docker搭建了6个应用服务的事
  • 【sgCreateAPIFunction】自定义小工具:敏捷开发→自动化生成API接口方法代码片段脚本(接口方法代码生成工具)
  • Vue2图片懒加载(vue-lazyload)
  • Jenkins-拉取代码
  • 深度解析:.secret勒索病毒如何加密你的数据并勒索赎金
  • 测试岗位应该学什么
  • 【RISC-V设计-12】- RISC-V处理器设计K0A之验证环境
  • react-redux的使用