学习鸿蒙基础(6)

一、@Prop属性 父——>子 单向同步
@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。@Prop装饰的变量和父组件建立单向的同步关系。@Prop变量允许在本地修改,但修改后的变化不会同步回父组件。当父组件中的数据源更改时,与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值,而在父组件中对应的@State装饰的变量被修改后,子组件本地修改的@Prop装饰的相关变量值将被覆盖。

注意:
@Prop变量装饰器允许装饰的变量类型只有:string、number、boolean、enum类型 

二、@Link属性  父——>子 双向同步
子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定@Link变量装饰器说明允许装饰的变量类型Object、class、string、number、boolean、enum类型,以及这些类型的数组。类型必须被指定,且和双向绑定状态变量的类型相同。不支持any,不支持简单类型和复杂类型的联合类型,不允许使用undefined和null。不支持Length、ResourceStr、ResourceColor类型,Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。
被装饰变量的初始值:无。

@Entry
@Component
struct PageLink {@State message: string = 'Hello World'@State isShow:boolean =falsebuild() {Row() {Column() {nav({isShow:$isShow})if(this.isShow){textrr()}}.height('100%')}}
}@Component
struct nav{@Link isShow:booleanbuild(){Row(){Button("show").onClick(v=>{this.isShow=!this.isShow}).margin(20)}}
}
@Component
struct textrr{build(){Row(){Text("你好").margin(60)}}
}

三、嵌套类对象属性变化
@ObiectLink变量装饰器和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步。被@observed装饰的类,可以被观察到属性的变化。
子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class obiect中的属性,这个属性同样也需要被@observed装饰。。单独使用@Observed是没有任何作用的,需要搭配@obiectLink或者@Prop使用
@Observed类装饰器:装饰class。需要放在class的定义前,使用new创建类对象
@ObiectLink变量装饰器:不与父组件中的任何类型同步变量。
允许装饰的变量类型:必须为被@Observed装饰的class实例,必须指定类型。不支持简单类型,可以使用@Prop。@ObiectLink的属性是可以改变的,但是变量的分配是不允许的,也就是说这个装。饰器装饰变量是只读的,不能被改变。


import myList from '../components/myListObserved'
import Item from '../model/ItemFlag'
@Entry
@Component
struct PageObserved {@State text: string = ''@State list: Item [] = [new Item(Date.now(), "房子"),new Item(Date.now(), "车子")]build() {Row() {Column() {Row(){CheckboxGroup({group:"checkBoxGroup"})Text("全选")Button("删除").onClick(v=>{this.list=this.list.filter(v=>!v.isChecked)}).margin({left:"20"}).backgroundColor(Color.Red)}.width("100%").margin({top:"10",left:'20'})Row() {TextInput({ text: this.text }).width(250).onChange((value) => {this.text = value})Button("增加").onClick(() => {this.list.push(new Item(Date.now(), this.text))this.text = ""}).margin(10)}.width("100%").justifyContent(FlexAlign.SpaceBetween).margin(10)List() {ForEach(this.list, (item, index) => {ListItem() {myList({ item, index, list: this.list})}.margin(10)})}.layoutWeight(1).divider({strokeWidth: 1,color: Color.Blue,startMargin: 10,endMargin: 10}).width('100%')}}.height('100%')}
}

import Item from '../model/ItemFlag';
//自定义组件  组件与组件之间是隔离的
@Component
struct myListObserved {@ObjectLink item: Item;private index: number;private list: Item [];build() {Row() {Checkbox({group:"checkBoxGroup"}).select(this.item.isChecked).onChange(v=>{this.item.isChecked=vconsole.log(JSON.stringify(this.item))})Text(this.item.text).fontSize(20).decoration({type:this.item.isChecked?TextDecorationType.Underline:TextDecorationType.None,color:Color.Blue})Button("删除").backgroundColor(Color.Red).onClick(() => {this.list.splice(this.index, 1)})}.justifyContent(FlexAlign.SpaceBetween).width("100%")}
}export default myListObserved
@Observed class ItemFlag {id: number;text: string;isChecked:boolean;constructor(id: number, text: string,isChecked=false) {this.id = idthis.text = textthis.isChecked=isChecked}
}export  default ItemFlag

四、与后代组件双向同步
@Provide和@Consume,应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递,@Provide和@Consume摆脱参数传递机制的束缚,实现跨层级传递。
其中@Provide装饰的变量是在祖先节点中,可以理解为被”提供”给后代的状态变量。@Consume装饰的变量是在后代组件中,去”消费(绑定)”祖先节点提供的变量。

1.装饰器参数:别名:常量字符串,可选。如果指定了别名,则通过别名来绑定变量,如果未指定别名,则通过变量名绑定变量。
2.同步类型:双向同步。从@Provide变量到所有@Consume变量以及相反的方向的数据同步。双向同步的操作与@State和@Link的组合相同。
3.允许装饰的变量类:Object、class、string、number、boolean、enum类型,以及这些类型的数组。不支持any.不支持简单类型和复杂类型的联合类型,不允许使用undefined和null。必须指定类型@Provide变量的@Consume变量的类型必须相同。说明不支持Length、ResourceStr、ResourceColor类型,Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类。

@Entry
@Component
struct PageProvide {@Provide('msg') message: string = 'Hello World'build() {Row() {Column() {Text("爷爷"+this.message).fontSize(50).fontWeight(FontWeight.Bold)Fahter()}.width('100%')}.height('100%')}
}@Component
struct Fahter{@Consume message:stringbuild(){Column(){Text("爸爸"+this.message).fontSize(50).fontWeight(FontWeight.Bold)Son()}}
}@Component
struct Son{@Consume msg:stringmessage:string ="nn"build(){Column(){Text("儿子"+this.msg).fontSize(50).fontWeight(FontWeight.Bold)Button("gaibian").onClick(v=>{this.msg="love world"})}}
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/708101.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB】SVMD_ MFE_SVM_LSTM 神经网络时序预测算法

有意向获取代码,请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 SVMD_MFE_SVM_LSTM神经网络时序预测算法结合了单变量分解(SVMD)、多尺度特征提取(MFE)、聚类后展开支持向量机(SVM)…

算法D31 | 贪心算法1 | 455.分发饼干 376. 摆动序列 53. 最大子序和

贪心算法其实就是没有什么规律可言,所以大家了解贪心算法 就了解它没有规律的本质就够了。 不用花心思去研究其规律, 没有思路就立刻看题解。 基本贪心的题目 有两个极端,要不就是特简单,要不就是死活想不出来。 学完贪心之后再…

rhcsa(rh134)

shell 查看用户shell a、如下查看/etc/shells文件列出了系统上所有可用的 shell(具体的可用的 shell 列表可能会因不同的红帽版本和配置而有所不同) (如下图/etc/shells文件包含/bin/tmux并不意味着tmux是一个shell。实际上,/etc/…

CSS:弹性盒子Flexible Box布局

CSS:Flexible Box弹性盒子布局 一、flex布局原理 ​ flex是flexible Box的缩写,意为 ”弹性布局“,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。 当我们的父盒子设置为flex布局之后,子元素的 float 、clear 和 vert…

4核8G服务器并发数多少?性能如何?

腾讯云4核8G服务器支持多少人在线访问?支持25人同时访问。实际上程序效率不同支持人数在线人数不同,公网带宽也是影响4核8G服务器并发数的一大因素,假设公网带宽太小,流量直接卡在入口,4核8G配置的CPU内存也会造成计算…

WPF应用程序使用MVVM模式

文章目录 一、前言二、正文:模式 - WPF应用程序使用MVVM设计模式2.0 一些术语2.1 秩序与混乱2.2 MVVM模式的演变2.3 为何WPF开发者喜爱MVVM2.4 Demo应用程序2.5 路由命令逻辑2.6 ViewModel类层次结构2.7 ViewModelBase类2.8 CommandViewModel类2.9 MainWindowViewMo…

Vueuse:打造高效的 Vue.js 开发利器

Vueuse:打造高效的 Vue.js 开发利器 Vueuse 是一个功能强大的 Vue.js 生态系统工具库,它提供了一系列的可重用的 Vue 组件和函数,帮助开发者更轻松地构建复杂的应用程序。本文将介绍 Vueuse 的主要特点和用法,以及它在 Vue.js 开发…

css - flex布局实现div横向滚动

父盒子: display: flex; //将容器设置为Flex布局。overflow-x: scroll; //设置容器水平方向出现滚动条。white-space: nowrap; //防止项目换行显示。 子盒子: flex: 0 0 auto; //设置项目为固定宽度。width: 200px; //设置项目的宽度。margin-rig…

【Vue的单选按钮不选中已解决亲测】

伙计,你是否因为后台给vue前端已经传入了对应的单选按钮的数据,为啥还是不选中呢!? 这个问题实话我百度乐很多都不能解决我的问题,最后机智如我的发现乐vue的自身的问题,后端返回的数据类型如果是数字int类…

Git 指令深入浅出【1】—— 文件管理

Git 指令深入浅出【1】—— 文件管理 一、新建仓库二、配置1. 基本指令2. 免密配置3. 简化指令 三、管理文件1. 常用文件管理指令(1)基本指令工作区暂存区版本库 (2)日志(3)查看修改 2. 版本回退&#xff0…

MySQL基础--10.1--sql查询各科成绩前三名

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 sql查询各科成绩前三名建表造数 方法一:使用加行号的方式查询方法二:使用子查询嵌套查询原理解析考虑并列情况 方法三:窗口函数1…

全面整理!机器学习常用的回归预测模型

Datawhale干货 作者:曾浩龙,Datawhale意向成员 前言 回归预测建模的核心是学习输入 到输出 (其中 是连续值向量)的映射关系。条件期望 是 到 的回归函数。简单来说,就是将样本的特征矩阵映射到样本标签空间。 图…

Springboot同一台服务器部署多个项目,导致redis混淆,如何根据不同项目区分

在Spring Boot应用中,如果在同一台服务器上部署了多个项目,并且每个项目都使用Redis作为缓存或存储,为了避免Redis数据混淆,你需要确保各个项目在访问Redis时使用不同的数据库索引号、键前缀或者连接配置。 以下是一些区分不同项目Redis数据的方法: 使用不同数据库索引:…

2024.02.28作业

模拟面试 1. 什么是回调函数 将函数作为另一函数的参数 实现:通过函数指针,如线程的创建函数 2. 结构体和共用体的区别 结构体的每个成员都会分配内存,大小为各个成员所占内存之和,内存对齐 共用体的内存以最大成员为主 3. 赋…

2024年 前端JavaScript Web APIs 第一天 笔记

1.1 -声明变量const优先 1.2 -DOM树和DOM对象 1.3 -获取DOIM元素 1.4 -DOM修改元素内容以及年会抽奖 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content&quo…

【linux系统讲解】

linux系统详细介绍 1. linux系统2. 文件内容操作3. 权限和所有权4. 进程管理5. 用户和群组管理6. 系统信息7. 网络操作8. 打包和解压缩9. 软件包管理10. 系统控制 1. linux系统 Linux是一种强大的开源操作系统&#xff0c;被广泛用于服务器、桌面、手机及嵌入式设备&#xff0…

学习Sora技术报告Video generation models as world simulators

原文链接&#xff1a; Video generation models as world simulators (openai.com) 摘要&#xff1a; 我们探索了在视频数据上大规模训练生成模型。具体来说&#xff0c;我们在可变片长、分辨率和纵横比的视频和图像上联合训练文本条件扩散模型text-conditional diffusion mo…

【Java多线程】面试常考——锁策略、synchronized的锁升级优化过程以及CAS(Compare and swap)

目录 1、锁的策略 1.1、乐观锁和悲观锁 1.2、轻量级锁和重量级锁 1.3、自旋锁和挂起等待锁 1.4、普通互斥锁和读写锁 1.5、公平锁和非公平锁 1.6、可重入锁和不可重入锁 2、synchronized 内部的升级与优化过程 2.1、锁的升级/膨胀 2.1.1、偏向锁阶段 2.1.2、轻量级锁…

2024年阿里云2核4G云服务器性能如何?价格便宜有点担心

阿里云2核4G服务器多少钱一年&#xff1f;2核4G服务器1个月费用多少&#xff1f;2核4G服务器30元3个月、85元一年&#xff0c;轻量应用服务器2核4G4M带宽165元一年&#xff0c;企业用户2核4G5M带宽199元一年。本文阿里云服务器网整理的2核4G参加活动的主机是ECS经济型e实例和u1…

如何更好地准备考研复试呢

准备研究生复试需要全面而细致的策略&#xff0c;以下是一些建议&#xff0c;帮助你更好地应对复试&#xff1a; 深入了解复试流程和要求&#xff1a; 详细了解复试的流程、考察内容和评分标准&#xff0c;确保你对每个环节都有清晰的认识。如果可能&#xff0c;可以向学长学姐…