ArkTS组件通信

父子通信

情况一:子组件只展示父组件中的状态

父组件通过 @State修饰符 定义变量,子组件通过 @Prop修饰符 获取变量。

Prop是 「单向传递」,父组件将变量「拷贝」一份交给子组件使用,子组件不可修改变量。

父组件

// 声明变量
@State count:number = 1
// 传值
Son({count:this.count})

子组件

// 接收
 @Prop count:number

情况二:子组件需要修改父组件中的状态

父组件通过 @State修饰符 定义变量,子组件通过 @Link修饰符 获取变量。

Link是 「双向传递」,父组件会将变量的「引用」交给子组件,相当于子组件可以直接修改父组件中的变量。

父组件

与Prop不同的是,当子组件使用@Link接收变量时(需要修改变量),父组件传值时需要使用 $

// 声明变量
@State count:number = 1
// 传值
Son({count:$count})

子组件

// 接收
@Link count:number

@Prop和@Link总结

@Prop@Link
同步类型单向同步双向同步
允许装饰的变量类型string、number、boolean、enum类型
父组件对象类型,子组件是对象属性
不可以是数组、any
父子类型一致:string、number、boolean、enum、object、class,以及他们的数组
数组中元素发生变化会引起刷新
嵌套类型以及数组中的对象属性无法触发视图更新
初始化方式禁止子组件初始化父组件传递,禁止子组件初始化f

在这里插入图片描述

嵌套对象以及数组元素为对象时如何进行数据同步

@Prop和@Link均无法对 嵌套对象以及数组元素为对象 的场景进行双向数据同步,此时需要使用「@ObjectLink」和「@Observed」装饰器。

操作流程(这里用嵌套对象举例,数组元素为对象的使用情况一致)

  1. @Observed修饰嵌套对象
  2. 参数无法直接使用@ObjectLink修饰
  3. 所以需要封装一个子组件,将该参数传给子组件
  4. 子组件中以变量接收该参数,使用@ObjectLink修饰符修饰后,就可以操作 嵌套对象以及数组元素为对象 了

在这里插入图片描述

跨组件通信

父组件通过 @Provide修饰符 定义变量,子组件通过 @Consume修饰符 获取变量。

不同于@State,父组件「不需要传递参数」,子组件通过 @Consume修饰符 「直接使用变量」即可。

父组件

// 声明状态
@Provide count:number = 1
// 无需传值
Son()

后代组件

// 接收
@Consume count:number

在这里插入图片描述

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

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

相关文章

java写个爬虫抓取汽车之家车型配置参数

前几天有个搞工程的表弟找我,问我什么车好,可以经常跑工地的,看上去又有面子。于是我挥动发财的小手,写一个爬虫程序,筛选并整理了一些数据,并附上下载的图片提供参考,看中了果断第二天提车到手…

C#教程(一):面向对象

1、介绍 C#是一种多范式编程语言,但其中一个主要的编程范式是面向对象编程(OOP)。面向对象编程有一些特点,而C#提供了丰富的功能来支持这些特点。 2、面向对象特点 封装(Encapsulation): 封装…

华为OD机试-传递悄悄话(JavaPythonGo)100%通过率

题意 给定一个二叉树,每个节点上站着一个人,节点数字表示父节点到该节点传递悄悄话需要花费的时间。初始时,根节点所在位置的人有一个悄悄话想要传递给其他人,求二又树所有节点上的人都接收到悄悄话花费的时间。 输入 给定一叉树 09 20-1-1 157-1-1-1-132 注:-1表示空节…

Unity | AVpro的最基础使用方法(视频播放插件)

一、 AVpro的使用方法 (一)准备播放器MediaPlayer 1. AVpro的播放器是MediaPlayer,在Heirarchy面板里创建 2.播放器里放视频 a.把视频放到StreamingAssets文件夹下 b.你就可以在MediaPlayer里面找到这个视频 c.选中以后,就会变成 这里点击播放可以播放…

WEX ISO 8583通信协议

1、什么是ISO 8583 ISO 8583是国际标准化组织&#xff08;ISO&#xff09;定义的一种金融交易协议&#xff0c; 它定义了一种消息格式&#xff0c;用于在不同的金融系统之间传递交易请求和响应2、Java如何实现ISO 8583 1、引入依赖包<dependency><groupId>org.jp…

spring boot 实现直播聊天室(二)

spring boot 实现直播聊天室(二) 技术方案: spring bootnettyrabbitmq 目录结构 引入依赖 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.96.Final</version> </dependency>Si…

使用YOLOv8训练图集详细教程

准备自己的数据集 训练YOLOv8时&#xff0c;选择的数据格式是VOC&#xff0c;因此下面将介绍如何将自己的数据集转换成可以直接让YOLOv8进行使用。 1、创建数据集 我的数据集都在保存在mydata文件夹&#xff08;名字可以自定义&#xff09;&#xff0c;目录结构如下&#xf…

万界星空科技MES---制造企业的加工生产模式

在现代制造业中&#xff0c;加工生产模式是制造企业组织和管理生产过程的重要方面。不同的加工模式适用于不同的生产需求和产品类型。其中流水型、离散型和混合型是三种常见的加工生产模式。1. 流水型加工模式 流水型加工模式是一种高度自动化的生产方式&#xff0c;适用于…

羊大师解答,鲜羊奶应该怎样煮才好喝?

羊大师解答&#xff0c;鲜羊奶应该怎样煮才好喝&#xff1f; 你是否对如何煮鲜羊奶感到困惑&#xff1f;继续阅读本文&#xff0c;小编羊大师将为大家揭秘鲜羊奶的烹饪方法。不管是作为配料还是单独享用&#xff0c;了解如何煮鲜羊奶将会让您获得更加美味又营养丰富的食物。接…

mysql8 windows下修改my.ini配置 this is incompatible with sql_mode=only_full_group_by

1、找到安装路径 show variables like %sql_mode;SHOW VARIABLES LIKE config_file;SHOW VARIABLES LIKE %datadir%;SHOW VARIABLES; 2、修改 sql_modeSTRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION

第二证券:防御性板块逆势活跃 A股结构性机会轮动

昨日商场慎重张望心境升温&#xff0c;个股跌多涨少。防御性板块中的医药、燃气板块涨幅居前。医药板块中&#xff0c;拓新药业、森萱医药涨超19%&#xff0c;百利天恒、亨迪药业、新赣江等多股涨超10%。 据中国气候网消息&#xff0c;从12月12日夜间初步&#xff0c;新一轮寒…

注塑模具ERP有哪些功能?可以帮助企业解决什么难题

不同的注塑模具有不同的业务流程和生产环节&#xff0c;有些生产企业在订单、物料需求计划、车间、班组负荷评估、项目成本核算、边角料统计分析等方面还存在不少问题。 与此同时&#xff0c;也有部分注塑模具企业通过ERP软件科学制定注塑生产排产&#xff0c;智能核算注塑物料…

算法通关村第十八关-黄金挑战回溯困难问题

大家好我是苏麟 , 今天带来几道回溯比较困难的题 . 回溯有很多比较难的问题&#xff0c;这里我们看两个&#xff0c;整体来说这两个只是处理略复杂&#xff0c;还不是最难的问题 . 大纲 IP问题 IP问题 描述 : 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 …

SAP报错 Exception condition “CNTL_ERROR“ triggered

报错背景&#xff0c;我写了个function alv跳转屏幕&#xff0c;而且有修改事件的程序&#xff0c;但是在我反复跳转修改操作&#xff0c;点创建单据的时候&#xff0c;我的程序直接dump啦 报错如下&#xff1a; 通过查询SAPQ&A查询到对应的解决方案。 机器翻译&#xff…

processon使用及流程图和泳道图的绘画(登录界面流程图,门诊流程图绘制门诊泳道图,住院泳道图,OA会议泳道图),Axure自定义元件

目录 一.processon图形的使用场景介绍 二.流程图绘画 三.泳道图的绘画 1.绘制门诊流程图绘制门诊泳道图 2. 绘制住院泳道图​编辑 3.绘制药库采购入库流程图 4.绘制OA会议泳道图 四.Axure自定义元件 1.Axure载入元件库 一.processon图形的使用场景介绍 二.流程图绘画 示例&…

算法复习——6种排序方法的简单回顾

算法复习——6种排序方法的简单回顾 常见排序方法&#xff1a;冒泡排序、选择排序、插入排序、堆排序、归并排序、快速排序的简单回顾 冒泡排序 重复“从序列右边开始比较相邻两个数字的大小,再根据结果交换两个数字的位置” 在冒泡排序中&#xff0c;第 1 轮需要比较 n - 1…

DSP外部中断笔记

中断原理 三部分 注意 &#xff0c;外部中断使能&#xff0c;PIE使能&#xff0c;CPU中断使能 外部中断有7个&#xff0c;PIE有12组&#xff0c;一个组有8个中断复用。只有一个CPU中断可执行。 外部中断原理 1、外部中断概述 外部中断结构图 外部中断XINT1对应的是0到31GPIO…

[Geek Challenge 2023] klf_2详解

考点 SSTI、join拼接绕过 fuzz测试后发现过滤了很多关键字 我们先试试构造__class__ {% set podict(po1,p2)|join()%} //构造pop {% set alipsum|string|list|attr(po)(18)%} //构造_ {% set cl(a,a,dict(claa,ssa)|join,a,a)|join()%} //构造__class__ {% set …

fl studio2024版本内置破解补丁和汉化文件,可以完美激活软件

fl studio是一款功能强大的编曲软件&#xff0c;怎么破解呢&#xff1f;今天小编就为大家带来了详细的安装破解教程&#xff0c;需要的朋友一起看看吧&#xff01; fl studio20.8是一款功能强大的编曲软件&#xff0c;也就是众所熟知的水果软件。它可以编曲、剪辑、录音、混音…

来聊聊final关键字

final关键字作用 final关键字可用于修饰类、方法、变量&#xff0c;通过final修饰后可以使类不可被继承&#xff0c;方法不可被重写&#xff0c;变量不可被修改。 正是因为这样使得final关键字修饰的东西天生自带线程安全属性&#xff0c;而且也没有额外的开销。 final使用注…