鸿蒙Harmony--状态管理器--@Provide装饰器和@Consume装饰器详解

今天是1月11日号星期四，农历腊月初一，辞旧的岁月里，愿你守得云开、终见月明，迎新的时光中，愿你心御寒冬、顺遂无忧，岁末冬深，希望接下来的日子里足够幸运，攒足勇气、信心和运气，去迎接新的一年，去遇见更好的自己！

目录

一，定义

二，特性

三，装饰器说明

 四，变量的传递/访问规则说明

五，使用

1，简单使用

 2，装饰对象

3，装饰Array

一，定义

@Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于其他父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。

其中@Provide装饰的变量是在祖先组件中，可以理解为被“提供”给后代的状态变量。@Consume装饰的变量是在后代组件中，去“消费（绑定）”祖先组件提供的变量。

二，特性

@Provide/@Consume装饰的状态变量有以下特性：

①@Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。

②后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。

③@Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，建议类型相同，否则会发生类型隐式转换，从而导致应用行为异常。

@Provide和@Consume通过相同的变量名或者相同的变量别名绑定时，@Provide修饰的变量和@Consume修饰的变量是一对多的关系。不允许在同一个自定义组件内，包括其子组件中声明多个同名或者同别名的@Provide装饰的变量，@Provide的属性名或别名需要唯一且确定，如果声明多个同名或者同别名的@Provide装饰的变量，会发生运行时报错。

三，装饰器说明

@State的规则同样适用于@Provide，差异为@Provide还作为多层后代的同步源。

@Provide变量装饰器说明
装饰器参数别名：常量字符串，可选。
如果指定了别名，则通过别名来绑定变量；如果未指定别名，则通过变量名绑定变量。
同步类型双向同步。
从@Provide变量到所有@Consume变量以及相反的方向的数据同步。双向同步的操作与@State和@Link的组合相同。
允许装饰的变量类型Object、class、string、number、boolean、enum类型，以及这些类型的数组。
支持Date类型。
不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。
必须指定类型。@Provide变量的@Consume变量的类型必须相同。
说明：
不支持Length、ResourceStr、ResourceColor类型，Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。
被装饰变量的初始值必须指定。
@Consume变量装饰器说明
装饰器参数别名：常量字符串，可选。
如果提供了别名，则必须有@Provide的变量和其有相同的别名才可以匹配成功；否则，则需要变量名相同才能匹配成功。
同步类型双向：从@Provide变量（具体请参见@Provide）到所有@Consume变量，以及相反的方向。双向同步操作与@State和@Link的组合相同。
允许装饰的变量类型Object、class、string、number、boolean、enum类型，以及这些类型的数组。
支持Date类型。
不支持any，不允许使用undefined和null。
必须指定类型。@Provide变量和@Consume变量的类型必须相同。
说明：
@Consume装饰的变量，在其父节点或者祖先节点上，必须有对应的属性和别名的@Provide装饰的变量。
被装饰变量的初始值无，禁止本地初始化。

 四，变量的传递/访问规则说明

@Provide传递/访问说明
从父组件初始化和更新可选，允许父组件中常规变量（常规变量对@Prop赋值，只是数值的初始化，常规变量的变化不会触发UI刷新，只有状态变量才能触发UI刷新）、@State、@Link、@Prop、@Provide、@Consume、@ObjectLink、@StorageLink、@StorageProp、@LocalStorageLink和@LocalStorageProp装饰的变量装饰变量初始化子组件@Provide。
用于初始化子组件允许，可用于初始化@State、@Link、@Prop、@Provide。
和父组件同步否。
和后代组件同步和@Consume双向同步。
是否支持组件外访问私有，仅可以在所属组件内访问。
@Consume传递/访问说明
从父组件初始化和更新禁止。通过相同的变量名和alias（别名）从@Provide初始化。
用于初始化子组件允许，可用于初始化@State、@Link、@Prop、@Provide。
和祖先组件同步和@Provide双向同步。
是否支持组件外访问私有，仅可以在所属组件内访问

五，使用

1，简单使用

 子组件：

@Component
export default struct ProvideTest {
  @Consume name:string

  build() {
    Row() {
      Column() {
        Text("子name:"+ this.name)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.name="袁震2"
          })
      }.width('100%')
    }.height('100%')
  }
}

 父组件：

import ProvideTest from './ProvideTest';

@Entry
@Component
struct Index {

  @Provide name:string ="袁震"

  build() {
    Column(){
      Text("父name:"+this.name)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.name ="袁震1"
        })
      ProvideTest()
    }
  }
}

运行结果：

点击父name点击子name

 所以，当装饰的数据类型为boolean、string、number类型时，可以观察到数值的变化。

 2，装饰对象

数据类：

export default class YuanZhen {

  public name: string = 'YuanZhen';

  public age: number = 18;

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}
import YuanZhen from './YuanZhen';

export default class Yuan {

  public number: number = 1;
  public yuanZhen: YuanZhen = new YuanZhen('yuanzhen', 18);

  constructor(number: number, yuanZhen: YuanZhen) {
    this.number = number
    this.yuanZhen = yuanZhen
  }
}

 子组件：

import Yuan from './bean/Yuan'

@Component
export default struct ProvideTest {
  @Consume yuan:Yuan

  build() {
    Row() {
      Column() {
        Text("子name:" + this.yuan.yuanZhen.name+"\nage:"+this.yuan.yuanZhen.age+"\nnumber:"+this.yuan.number)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.yuan.number=26
            this.yuan.yuanZhen.age=30
            this.yuan.yuanZhen.name="袁世震"
          })
      }.width('100%')
    }.height('100%')
  }
}

父组件：

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';

@Entry
@Component
struct Index {
  @Provide yuan:Yuan=new Yuan(2,new YuanZhen("袁震",18))

  build() {
    Column(){
      Text("父name:" + this.yuan.yuanZhen.name+"\nage:"+this.yuan.yuanZhen.age+"\nnumber:"+this.yuan.number)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.yuan.number=1
          this.yuan.yuanZhen.age=32
          this.yuan.yuanZhen.name="袁震1"
        })
      ProvideTest()
    }
  }
}

运行效果：

点击父name点击子name

所以，当装饰的数据类型为class或者Object的时候，可以观察到赋值和属性赋值的变化（属性为Object.keys(observedObject)返回的所有属性）。

3，装饰Array

子组件：

import Yuan from './bean/Yuan'

@Component
export default struct ProvideTest {
  @Consume yuan:Array<Yuan>

  build() {
    Row() {
      Column() {
        Text("子size:" + this.yuan.length+"\nage:"+this.yuan[0].yuanZhen.age+"\nnumber:"+this.yuan[0].number)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.yuan[0].number =20
            this.yuan[0].yuanZhen.age=35
            this.yuan.pop()
          })
      }.width('100%')
    }.height('100%')
  }
}

 父组件：

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';

@Entry
@Component
struct Index {
  @Provide yuan:Array<Yuan>=new Array

  aboutToAppear(){
    let yuan1:Yuan =new Yuan(1,new YuanZhen("袁震1",18))
    let yuan2:Yuan =new Yuan(2,new YuanZhen("袁震2",19))
    let yuan3:Yuan =new Yuan(3,new YuanZhen("袁震3",20))
    this.yuan.push(yuan1)
    this.yuan.push(yuan2)
    this.yuan.push(yuan3)
  }

  build() {
    Column(){
      Text("父size:" + this.yuan.length+"\nage:"+this.yuan[0].yuanZhen.age+"\nnumber:"+this.yuan[0].number)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.yuan[0].number =10
          this.yuan[0].yuanZhen.age=30
          this.yuan.pop()
        })
      ProvideTest()
    }
  }
}

 运行：

点击父点击子

由此可见， 当装饰的对象是array的时候，可以观察到数组的添加、删除、更新数组单元

！注意：更新原理

  1. 初始渲染：

    1. @Provide装饰的变量会以map的形式，传递给当前@Provide所属组件的所有子组件；
    2. 子组件中如果使用@Consume变量，则会在map中查找是否有该变量名/alias（别名）对应的@Provide的变量，如果查找不到，框架会抛出JS ERROR；
    3. 在初始化@Consume变量时，和@State/@Link的流程类似，@Consume变量会保存在map中查找到的@Provide变量，并把自己注册给@Provide。

  2. 当@Provide装饰的数据变化时：

    1. 通过初始渲染的步骤可知，子组件@Consume已把自己注册给父组件。父组件@Provide变量变更后，会遍历更新所有依赖它的系统组件（elementid）和状态变量（@Consume）；
    2. 通知@Consume更新后，子组件所有依赖@Consume的系统组件（elementId）都会被通知更新。以此实现@Provide对@Consume状态数据同步。

  3. 当@Consume装饰的数据变化时：

    通过初始渲染的步骤可知，子组件@Consume持有@Provide的实例。在@Consume更新后调用@Provide的更新方法，将更新的数值同步回@Provide，以此实现@Consume向@Provide的同步更新。

 

 

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

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

相关文章

2024年1月1日孙溟㠭篆刻艺术展开幕式于北京大学北大书店成功举办

2024年1月1日孙溟㠭篆刻艺术展开幕式于北京大学北大书店成功举办

“印记青春——会说话的石头” 主题文化展盛大开幕 2024年1月1日正值新年伊始&#xff0c;由北京大学出版社、北大书店、不黑文化艺术学社、中国诗书画研究会三才书画院联合举办的“印记 青春——会说话的石头”主题篆刻艺术展&#xff0c;在北京大学新太阳学生中心拉开帷幕。 …
阅读更多...
深度学习”和“多层神经网络”的区别

深度学习”和“多层神经网络”的区别

在讨论深度学习与多层神经网络之间的差异时&#xff0c;我们必须首先理解它们各自是什么以及它们在计算机科学和人工智能领域的角色。 深度学习是一种机器学习的子集&#xff0c;它使用了人工神经网络的架构。深度学习的核心思想是模拟人脑神经元的工作方式&#xff0c;以建立…
阅读更多...
tailwindcss真的好用吗？

tailwindcss真的好用吗？

写在前面 今天写一篇关于tailwindcss 的文章&#xff0c;其实这个css技术已经出现很久了&#xff0c;在一些大型项目很多人也已经在用了&#xff0c;虽然不是说必须要会吧&#xff0c;但是没听说过肯定是不行的&#xff0c;他的操作逻辑应该是和unocss差不多&#xff0c;但是今…
阅读更多...
【UE Niagara学习笔记】07 - 火焰的热变形效果

【UE Niagara学习笔记】07 - 火焰的热变形效果

目录 效果 步骤 一、创建热变形材质 二、添加新的发射器 2.1 设置粒子材质 2.2 设置粒子初始大小 2.3 设置粒子持续生成 三、修改材质 四、设置粒子效果 在上一篇博客&#xff08;【UE Niagara学习笔记】06 - 制作火焰喷射过程中飞舞的火星&#xff09;的基础上继续…
阅读更多...
[力扣 Hot100]Day2 字母异位词分组

[力扣 Hot100]Day2 字母异位词分组

题目描述 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 出处 思路 这题有点考阅读理解&#xff0c;意思就是把输入数组中的所含字母相同但顺序不同的单词放到同…
阅读更多...
主动学习基础-贝叶斯神经网络

主动学习基础-贝叶斯神经网络

引言 传统的深度神经网络一般都有过度自信的问题。 即使我给神经网络提供一个从来没有训练过的类别图像&#xff0c;神经网络也会输出一个类别。比如训练猫狗的分类器&#xff0c;如果你抛出一个人的图像&#xff0c;网络也会将其分类为猫或者狗。 在几乎所有现实世界的问题中…
阅读更多...
Netty通信中的粘包半包问题(一)

Netty通信中的粘包半包问题(一)

前言 我们在日常开发过程中&#xff0c;客户端和服务端的连接大多使用的是TCP协议,因为我们要保证数据的可靠传输&#xff0c; 当网络中出现丢包时要求&#xff0c;要求数据包的发送端重传给接收端。而TCP是一种面向连接的传输层协议&#xff0c; 当使用TCP进行传输时&#xf…
阅读更多...
YOLOv5改进有效涨点目录 | 包含卷积、主干、检测头、注意力机制、Neck上百种创新机制

YOLOv5改进有效涨点目录 | 包含卷积、主干、检测头、注意力机制、Neck上百种创新机制

⭐ YOLOv5改进有效系列目录 ⭐ 前言 Hello&#xff0c;各位读者们好 本专栏自开设一个月以来已经更新改进教程70余篇其中包含C2f、主干、检测头、注意力机制、Neck多种结构上创新&#xff0c;也有损失函数和一些细节点上的创新。同时本人一些讲解视频和包含我所有创新的YOLO…
阅读更多...
2023年全国职业院校技能大赛（高职组）“云计算应用”赛项赛卷⑥

2023年全国职业院校技能大赛（高职组）“云计算应用”赛项赛卷⑥

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷6 目录 需要竞赛软件包环境以及备赛资源可私信博主&#xff01;&#xff01;&#xff01; 2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷6 模块一…
阅读更多...
MySQL：DML数据操作语言（添加，删除，修改），DDL数据查询语言（条件查询，分组查询，排序查询，分页查询）

MySQL：DML数据操作语言（添加，删除，修改），DDL数据查询语言（条件查询，分组查询，排序查询，分页查询）

目录 1.DML&#xff08;数据操作语言&#xff09;1.添加数据2.修改数据3.删除数据 2.DQL(数据查询语言)1.DQL-语法2.基本查询3.条件查询(WHERE)1.语法&#xff1a;2.条件&#xff1a;3.案例: 4.聚合函数1.介绍2.常见聚合函数3.语法4.案例 5.分组查询&#xff08;GROUP BY&#…
阅读更多...
Proteus仿真stm32f103r6输出PWM/正弦波

Proteus仿真stm32f103r6输出PWM/正弦波

资料下载地址&#xff1a;Proteus仿真stm32f103r6输出PWM/正弦波 一、仿真图 Proteus仿真stm32f103r6输出PWM/正弦波 二、程序 #include "pbdata.h"u16 fre; void RCC_Configuration(void); void GPIO_Configuration(void); void TIM3_Configuration();void Dela…
阅读更多...
SpringBoot项目docker镜像生成

SpringBoot项目docker镜像生成

1. 本文思路 拉取基础镜像基于镜像创建容器在容器中&#xff0c;安装所需依赖部署脚本提交容器&#xff0c;生成新的镜像编写Dockerfile&#xff0c;添加启动命令&#xff0c;生成最终镜像导出镜像 2. 操作步骤 2.1 基础环境 # 拉取镜像 docker pull centos:7.6.1810 # 运行…
阅读更多...
C++ n皇后问题 || 深度优先搜索模版题

C++ n皇后问题 || 深度优先搜索模版题

n− 皇后问题是指将 n 个皇后放在 nn 的国际象棋棋盘上&#xff0c;使得皇后不能相互攻击到&#xff0c;即任意两个皇后都不能处于同一行、同一列或同一斜线上。 现在给定整数 n &#xff0c;请你输出所有的满足条件的棋子摆法。 输入格式 共一行&#xff0c;包含整数 n 。 …
阅读更多...
迅为RK3568开发板Android11/12/Linux编译驱动到内核

迅为RK3568开发板Android11/12/Linux编译驱动到内核

在平时的驱动开发中&#xff0c;经常需要在内核中配置某种功能&#xff0c;为了方便大家开发和学习&#xff0c;本小 节讲解如何在内核中添加驱动。具体的讲解原理讲解请参考本手册的驱动教程。 Android11 源码如果想要修改内核&#xff0c;可以运行以下命令进行修改: cd ke…
阅读更多...
机器学习_8、支持向量机

机器学习_8、支持向量机

支持向量机解决鸢尾花数据集分类问题 # 导入鸢尾花数据集 from sklearn.datasets import load_iris import pandas as pd import numpy as npiris_data load_iris() Xiris_data.data yiris_data.target# 划分训练集与测试集 from sklearn.model_selection import train_test_…
阅读更多...
【PaperReading- VLM】1. FERRET

【PaperReading- VLM】1. FERRET

CategoryContent论文题目FERRET: REFER AND GROUND ANYTHING ANYWHERE AT ANY GRANULARITY作者Haoxuan You (Columbia University), Haotian Zhang, Zhe Gan, Xianzhi Du, Bowen Zhang, Zirui Wang, Liangliang Cao (Apple AI/ML), Shih-Fu Chang (Columbia University), Yinfe…
阅读更多...
【java】Error:java: 无效的源发行版: 12，只需三步

【java】Error:java: 无效的源发行版: 12，只需三步

运行项目报错 “Error:java: 无效的源发行版: 12” 先在file下的project Structure 下选择 Project 将 Project language level 选择版本 8 对应的。 然后点击右下角的Apply OK 再在file下的project Structure 下选择Moudels ,将该项目的Sources改为8. 然后点击右下角的Apply…
阅读更多...
Logstash应用介绍

Logstash应用介绍

1.Logstash介绍 1.1 前世今生 Logstash 项目诞生于 2009 年 8 月 2 日。其作者是世界著名的运维工程师乔丹西塞(JordanSissel)&#xff0c;乔丹西塞当时是著名虚拟主机托管商 DreamHost 的员工。 Logstash 动手很早&#xff0c;对比一下&#xff0c;scribed 诞生于 2008 年&am…
阅读更多...
zabbix监控部署

zabbix监控部署

目录 一、什么是zabbix&#xff1f; 二、zabbix监控原理 三、zabbix常见的五个程序 四、zabbix监控mysql实验 1、部署服务端 2、部署客户端 3、自定义监控内容 一、什么是zabbix&#xff1f; zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的…
阅读更多...
Java应用实践课程设计——背诵单词助手

Java应用实践课程设计——背诵单词助手

项目描述 该项目实现了一个简单的单词背诵小助手系统&#xff0c;包括管理员模块和用户模块。管理员可以对CET4表进行增加、删除、修改和查询等操作&#xff1b;用户可背诵CET4表中的单词&#xff0c;回顾已掌握和未掌握的单词。 数据库设计——words.sql
阅读更多...
最新文章

Copyright @ 2022~2023