【鸿蒙学习笔记】@Prop装饰器：父子单向同步

官方文档：@Prop装饰器：父子单向同步

[Q&A] @Prop装饰器作用

@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。

[Q&A] @Prop装饰器特点

１・@Prop装饰器不能在@Entry装饰的自定义组件中使用。
２・@Prop装饰变量时会进行深拷贝，在拷贝的过程中除了基本类型、Map、Set、Date、Array外，都会丢失类型。

样例1：Date

@Component
struct DateComponent {
  @Prop childSelectedDate: Date = new Date('');

  build() {
    Column() {
      Row() {
        Button('child +1年').margin(5).width('30%')
          .onClick(() => {
            this.childSelectedDate.setFullYear(this.childSelectedDate.getFullYear() + 1)
          })
        Button('child +1月').margin(5).width('30%')
          .onClick(() => {
            this.childSelectedDate.setMonth(this.childSelectedDate.getMonth() + 1)
          })
        Button('child +1天').margin(5).width('30%')
          .onClick(() => {
            this.childSelectedDate.setDate(this.childSelectedDate.getDate() + 1)
          })
      }.width('100%')

      Button('child 重置日期').margin(10).width('100%')
        .onClick(() => {
          this.childSelectedDate = new Date('2023-07-07')
        })

      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.childSelectedDate
      })
    }
  }
}

@Entry
@Component
struct SizeExample {
  @State parentSelectedDate: Date = new Date('2008-08-08');

  build() {
    Column() {
      Row() {
        Button('parent +1年').margin(5).width('30%')
          .onClick(() => {
            this.parentSelectedDate.setFullYear(this.parentSelectedDate.getFullYear() + 1)
          })
        Button('parent +1月').margin(5).width('30%')
          .onClick(() => {
            this.parentSelectedDate.setMonth(this.parentSelectedDate.getMonth() + 1)
          })
        Button('parent +1天').margin(5).width('30%')
          .onClick(() => {
            this.parentSelectedDate.setDate(this.parentSelectedDate.getDate() + 1)
          })
      }.width('100%')

      Button('parent 重置日期').margin(10).width('100%')
        .onClick(() => {
          this.parentSelectedDate = new Date('2023-07-07')
        })

      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.parentSelectedDate
      })
      DateComponent({ childSelectedDate: this.parentSelectedDate })
    }
  }
}

在这里插入图片描述

样例2：父组件@State简单数据类型→子组件@Prop简单数据类型同步

@Component
struct CountDownComponent {
  @Prop count: number = 0;
  costOfOneAttempt: number = 1;

  build() {
    Row() {
      if (this.count > 0) {
        Text(`当前值为 ${this.count} .`).fontSize(20).margin(10).textAlign(TextAlign.Center)
      } else {
        Text('Game over!').fontSize(20).margin(10)
      }
      Button('子 -1').onClick(() => {
        this.count -= this.costOfOneAttempt;
      }).width("40%")
    }.width('100%')
  }
}

@Entry
@Component
struct SizeExample {
  @State countDownStartValue: number = 10;

  build() {
    Column() {
      Row() {
        if (this.countDownStartValue > 0) {
          Text(`当前值为 ${this.countDownStartValue} .`).fontSize(20).margin(5).textAlign(TextAlign.Center)
        } else {
          Text('Game over!').fontSize(20).margin(10)
        }

        Button('父 +1 ').onClick(() => {
          this.countDownStartValue += 1;
        }).margin(5).width("20%")

        Button('父 -1 ').onClick(() => {
          this.countDownStartValue -= 1;
        }).margin(5).width("20%")
      }.width('100%')

      CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2 })
    }
  }
}

在这里插入图片描述

样例3：父组件@State数组项→子组件@Prop简单数据类型同步

@Component
struct Child {
  @Prop value: number = 0;

  build() {
    Text(`${this.value}`).fontSize(30)
      .onClick(() => {
        this.value++
      })
  }
}

@Entry
@Component
struct SizeExample {
  @State arr: number[] = [1, 2, 3];

  build() {
    Row() {

      Column() {
        Text(`当前值为 ${this.arr[0]},${this.arr[1]},${this.arr[2]}.`).fontSize(30).margin(10).textAlign(TextAlign.Center)

        Divider().height(10)

        Row() {
          Child({ value: this.arr[0] }).width('30%').align(Alignment.Center).backgroundColor(Color.Red)
          Child({ value: this.arr[1] }).width('30%').align(Alignment.Center).backgroundColor(Color.Green)
          Child({ value: this.arr[2] }).width('30%').align(Alignment.Center).backgroundColor(Color.Yellow)
        }.alignItems(VerticalAlign.Center)

        Divider().height(10)

        Row() {
          ForEach(this.arr, (item: number) => {
            Child({ value: item }).width('30%').align(Alignment.Center).backgroundColor(Color.Orange).border({ width: 1, style: BorderStyle.Dashed })
          }, (item: string) => item.toString())
        }.alignItems(VerticalAlign.Center)

        Divider().height(10)

        Text('重置').fontSize(30).backgroundColor(Color.Pink).width('50%').textAlign(TextAlign.Center).padding(10)
          .onClick(() => {
            // 两个数组都包含项“3”。
            this.arr = this.arr[0] == 1 ? [3, 4, 5] : [1, 2, 3];
          })
      }
    }
  }
}

在这里插入图片描述

样例4：父组件@State类对象属性→@Prop简单类型的同步

class Book {
  public title: string;
  public pages: number;
  public readIt: boolean = false;

  constructor(title: string, pages: number) {
    this.title = title;
    this.pages = pages;
  }
}

@Component
struct ReaderComp {
  @Prop book: Book = new Book("", 0);

  build() {
    Row() {
      Text(this.book.title).fontSize(20)
      Text(` 有 ${this.book.pages} 页! `).fontSize(20)
      Text(`${this.book.readIt ? " 我读了" : ' 我还没开始读'}`).fontSize(20)
        .onClick(() => this.book.readIt = true).backgroundColor(Color.Pink)
    }
  }
}

@Entry
@Component
struct SizeExample {
  @State book: Book = new Book('资治通鉴', 765);

  build() {
    Column() {
      ReaderComp({ book: this.book })
      ReaderComp({ book: this.book })
    }
  }
}

在这里插入图片描述

样例5：父组件@State数组项→@Prop class类型的同步

let nextId: number = 1;

@Observed // @Prop在子组件装饰的状态变量和父组件的数据源是单向同步关系,需要使用@Observed装饰class Book，Book的属性将被观察。
class Book {
  public id: number;
  public title: string;
  public pages: number;
  public readIt: boolean = false;

  constructor(title: string, pages: number) {
    this.id = nextId++;
    this.title = title;
    this.pages = pages;
  }
}

@Component
struct ReaderComp {
  @Prop book: Book = new Book("", 1);

  build() {
    Row() {
      Text(` ${this.book ? this.book.title : "未定义"}`).fontColor(Color.Red)
      Text(` 有 ${this.book ? this.book.pages : "未定义"} 页!`).fontColor(Color.Black)
      Text(` ${this.book ? (this.book.readIt ? "我已经读了" : '我还没读' ): "未定义"}`).fontColor(Color.Blue)
        .onClick(() => this.book.readIt = true)
    }
  }
}

@Entry
@Component
struct SizeExample {
  @State allBooks: Book[] = [new Book("资治通鉴", 100), new Book("史记", 100), new Book("论语", 100)];

  build() {
    Column() {
      Text('畅销书').width(312).height(40).fontSize(20).margin(12).fontColor('#e6000000')
      ReaderComp({ book: this.allBooks[2] }).backgroundColor('#0d000000').width(312).height(40).padding({ left: 20, top: 10 }).borderRadius(20).colorBlend('#e6000000')

      Divider()

      Text('已经购买的书').width(312).height(40).fontSize(20).margin(12).fontColor('#e6000000')
      ForEach(this.allBooks, (book: Book) => {
        ReaderComp({ book: book }).margin(12).width(312).height(40).padding({ left: 20, top: 10 }).backgroundColor('#0d000000').borderRadius(20)
      },(book: Book) => book.id.toString())

      Button('追加').width(312).height(40).margin(12).fontColor('#FFFFFF 90%')
        .onClick(() => {
          this.allBooks.push(new Book("孟子", 100));
        })

      Button('移除第一本书').width(312).height(40).margin(12).fontColor('#FFFFFF 90%')
        .onClick(() => {
          if (this.allBooks.length > 0){
            this.allBooks.shift();
          } else {
            console.log("length <= 0")
          }
        })

      Button("所有人都已经读了").width(312).height(40).margin(12).fontColor('#FFFFFF 90%')
        .onClick(() => {
          this.allBooks.forEach((book) => book.readIt = true)
        })
    }
  }
}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Android Studio上传新项目到Gitee

Android Studio上传新项目到Gitee

一、在Gitee上创建仓库 首先需要再Gitee上创建仓库 1、在Gitee中新建仓库 2、输入仓库信息 3、生成仓库地址 创建成功会生成一个仓库地址&#xff0c;格式如下&#xff1a; https://gitee.com/test/compose_mvi_demo.git二、Android Studio 上传项目到Gitee 1、在Android …
阅读更多...
CXL-GPU: 全球首款实现百ns以内的低延迟CXL解决方案

CXL-GPU: 全球首款实现百ns以内的低延迟CXL解决方案

数据中心在追求更高性能和更低总拥有成本&#xff08;TCO&#xff09;的过程中面临三大主要内存挑战。首先&#xff0c;当前服务器内存层次结构存在局限性。直接连接的DRAM与固态硬盘&#xff08;SSD&#xff09;存储之间存在三个数量级的延迟差异。当处理器直接连接的内存容量…
阅读更多...
Hive测试

Hive测试

1、数据仓库的体系结构包含四个层次&#xff0c;分别是&#xff1a; 数据源 数据存储和管理 数据服务 数据应用 2、Hive提供了类似关系数据库SQL的查询语言&#xff1a; HiveQL 3、Hive某种程度上可以看作 用户编程接口&#xff0c;本身不存储和处理数据&#xff0c;存储数据依…
阅读更多...
CesiumJS【Basic】- #057 绘制纹理填充多边形（Primitive方式）

CesiumJS【Basic】- #057 绘制纹理填充多边形（Primitive方式）

文章目录 绘制纹理填充多边形（Primitive方式）1 目标2 代码2.1 main.ts绘制纹理填充多边形（Primitive方式） 1 目标 使用Primitive方式绘制绘制纹理填充多边形 2 代码 2.1 main.ts import * as Cesium from &
阅读更多...
CDC模型

CDC模型

引言 聚类是一种强大的机器学习方法&#xff0c;用于根据特征空间中元素的接近程度发现相似的模式。它广泛用于计算机科学、生物科学、地球科学和经济学。尽管已经开发了最先进的基于分区和基于连接的聚类方法&#xff0c;但数据中的弱连接性和异构密度阻碍了其有效性。在这项…
阅读更多...
职业性格测试，企业HR招聘测评最常用人才测评

职业性格测试，企业HR招聘测评最常用人才测评

关于求职测评&#xff0c;招聘中用到的人才测评&#xff0c;你们对这个话题又知道多少呢&#xff1f;为什么我会以90后为分界线&#xff0c;首先90后正是接触计算机最早的一代&#xff0c;因为小编是90后&#xff0c;更了解这个年龄段都在做什么&#xff0c;可以说90后见证了互…
阅读更多...
【echarts】拖拽滑块dataZoom-slider自定义样式，简单适配移动端

【echarts】拖拽滑块dataZoom-slider自定义样式，简单适配移动端

电脑端 移动端 代码片段 dataZoom: [{type: inside,start: 0,end: 100},{type: slider,backgroundColor: #F2F5F9,fillerColor: #BFCCE3,height: 13, // 设置slider的高度为15start: 0,end: 100,right: 60,left: 60,bottom: 15,handleIcon:path://M30.9,53.2C16.8,53.2,5.3,41.…
阅读更多...
第一周题目总结

第一周题目总结

1.车尔尼有一个数组 nums &#xff0c;它只包含 正 整数&#xff0c;所有正整数的数位长度都 相同 。 两个整数的 数位不同 指的是两个整数 相同 位置上不同数字的数目。 请车尔尼返回 nums 中 所有 整数对里&#xff0c;数位不同之和。 示例 1&#xff1a; 输入&#xff1a…
阅读更多...
Android Studio环境搭建(4.03)和报错解决记录

Android Studio环境搭建(4.03)和报错解决记录

1.本地SDK包导入 安装好IDE以及下好SDK包后&#xff0c;先不要管IDE的引导配置&#xff0c;直接新建一个新工程&#xff0c;进到开发界面。 SDK路径配置&#xff1a;File---->>Other Settings---->>Default Project Structure 拷贝你SDK解压的路径来这&#xff0c;…
阅读更多...
自动化任务工具 -- zTasker v1.94 绿色版

自动化任务工具 -- zTasker v1.94 绿色版

软件简介 zTasker 是一款功能强大的自动化任务管理软件&#xff0c;以其简洁易用、一键式操作而著称。软件体积小巧&#xff0c;启动迅速&#xff0c;提供了超过100种任务类型和30多种定时/条件执行方法&#xff0c;能够满足用户在自动化方面的多样化需求。 zTasker 支持定时任…
阅读更多...
数据结构 - C/C++ - 树

数据结构 - C/C++ - 树

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 树的概念 结构特性 树的样式 树的存储 树的遍历 节点增删 二叉搜索树 平衡二叉树 树的概念 二叉树是树形结构&#xff0c;是一种非线性结构。 非线性结构&#xff1a;在二叉树中&#x…
阅读更多...
分享一款可编辑本地电脑文件的在线编辑器

分享一款可编辑本地电脑文件的在线编辑器

背景 之前见过在线版的VSCode&#xff0c;被惊讶到了。网页上竟然可以编辑电脑本地的文件&#xff0c;打破了网页无法编辑本地电脑文件的限制。一直好奇怎么做的。抽空研究了一下&#xff0c;然后发现其实也不难。 分析 先给大家介绍一下这款在线编辑器的效果。 左侧栏为文件…
阅读更多...
森马基于MaxCompute+Hologres+DataWorks构建数据中台

森马基于MaxCompute+Hologres+DataWorks构建数据中台

讲师&#xff1a;晋银龙 浙江森马数仓高级经理 本次案例主要分享森马集团面对多年自建的多套数仓产品体系&#xff0c;通过阿里云MaxComputeHologresDataWorks统一数仓平台&#xff0c;保障数据生产稳定性与数据质量&#xff0c;减少ETL链路及计算时间&#xff0c;每年数仓整体…
阅读更多...
平衡二叉查找树和多路查找树

平衡二叉查找树和多路查找树

平衡二叉查找树 普通平衡二叉查找树 平衡二叉树定义是按照有序排列成树状&#xff0c;左子树数据大于右子树&#xff0c;任意节点的左右子树高度不能大于1 优点&#xff1a;可以保证绝对的平衡 缺点&#xff1a;当进行删除节点和新增节点&#xff0c;树进行自平衡的时候&…
阅读更多...
计算机网络网络层复习题2

计算机网络网络层复习题2

一. 单选题&#xff08;共22题&#xff0c;100分&#xff09; 1. (单选题)如果 IPv4 数据报太大&#xff0c;会在传输中被分片&#xff0c;对分片后的数据报进行重组的是&#xff08; &#xff09;。 A. 中间路由器B. 核心路由器C. 下一跳路由器D. 目的主机 我的答案: D:目的…
阅读更多...
RocketMQ源码学习笔记：Producer启动流程

RocketMQ源码学习笔记：Producer启动流程

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育rocketMq官方文档 目录 1、Overview1.1、创建MQClientInstance1.1.1、检查1.1.1、MQClientInstance的ID 1.2、MQClientInstance.start() 1、Overview 这是发送信息的代码样例&#xff0c; DefaultMQProducer produ…
阅读更多...
Qt中使用MySQL数据库详解，好用的模块类封装

Qt中使用MySQL数据库详解，好用的模块类封装

本文将详细介绍如何在Qt应用程序中集成MySQL数据库&#xff0c;并封装实现好用的mysql数据库操作类。包括环境准备、连接数据库、执行查询及异常处理等关键步骤&#xff0c;同时包含mysql驱动的编译。分享给有需要的小伙伴&#xff0c;喜欢的可以点击收藏。 目录 环境准备 项…
阅读更多...
MySql Innodb锁机制

MySql Innodb锁机制

锁概述 undo log版本链 Read View机制实现的MVCC多版本并发控制&#xff0c;可以防止事务并发读写同一数据时出现的脏读不可重复读幻读问题。但除脏读不可重复读幻读问题外&#xff0c;并发读写同一数据还有脏写问题。就是当多个事务并发更新同一条数据时&#xff0c;此时就可…
阅读更多...
【CT】LeetCode手撕—199. 二叉树的右视图

【CT】LeetCode手撕—199. 二叉树的右视图

目录 题目1- 思路2- 实现⭐199. 二叉树的右视图——题解思路 3- ACM 实现 题目 原题连接&#xff1a;199. 二叉树的右视图 1- 思路 使用二叉树的层序遍历 2- 实现 ⭐199. 二叉树的右视图——题解思路 class Solution {public List<Integer> rightSideView(TreeNode ro…
阅读更多...
Let‘s Encrypt 申请免费 SSL 证书（每隔60天自动更新证书）

Let‘s Encrypt 申请免费 SSL 证书（每隔60天自动更新证书）

文章目录 官网文档简介安装 Nginxacme.sh生成证书智能化生成证书 安装证书查看已安装证书更新证书 官网 https://letsencrypt.org/zh-cn/ 文档 https://letsencrypt.org/zh-cn/docs/ 简介 Let’s Encrypt 是一个非营利组织提供的免费SSL/TLS证书颁发机构&#xff0c;旨在促…
阅读更多...
最新文章

Copyright @ 2022~2023