HarmonyOS Next快速入门:@Provide和@Consume

简介: 本课程《HarmonyOS Next快速入门》适合初学者,重点讲解@Provide与@Consume装饰器在跨层级组件间实现双向数据同步的应用。通过实例演示如何在祖先与后代组件中传递状态变量,提升开发效率,掌握HarmonyOS应用开发核心技巧。点击学习视频教程,快速掌握UI范式与状态管理。

HarmonyOS Next快速入门##HarmonyOS应用开发##教育

点击跳转《HarmonyOS Next快速入门》视频教程

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

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

@Provide/@Consume是跨组件层级的双向同步。在阅读@Provide和@Consume文档前,建议开发者对UI范式基本语法和自定义组件有基本的了解。建议提前阅读:基本语法概述,声明式UI描述,自定义组件-创建自定义组件。

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

  • @Provide装饰的状态变量自动对其所有后代组件可用,即该变量被“provide”给他的后代组件。由此可见,@Provide的方便之处在于,开发者不需要多次在组件之间传递变量。
  • 后代通过使用@Consume去获取@Provide提供的变量,建立在@Provide和@Consume之间的双向数据同步,与@State/@Link不同的是,前者可以在多层级的父子组件之间传递。
  • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定,建议类型相同,否则会发生类型隐式转换,从而导致应用行为异常。

@Provide/@Consume必须指定类型,允许装饰的变量类型如下所示:

  • Object、class、string、number、boolean、enum类型,以及这些类型的数组。
  • 支持Date类型。
  • API11及以上支持Map、Set类型。
  • 支持ArkUI框架定义的联合类型Length、ResourceStr、ResourceColor类型。
  • @Provide变量的@Consume变量的类型必须相同
  • 不支持any。
  • API11及以上支持上述支持类型的联合类型,比如string | number, string | undefined 或者 ClassA | null,示例见@Provide_and_Consume支持联合类型实例。

代码示例

// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;

// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

代码实例
ProvideConsumePage

import {
    SonComponent } from './components/SonComponent';

@Entry
@Component
struct ProvideConsumePage {
   
  @State message: string = '第3节 @Provide和@Consume';
  @Provide('count') stateCount: number = 0

  build() {
   
    Column({
   space:10}) {
   
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('增加次数').onClick(()=>{
   
        this.stateCount++
      })
      Text('stateCount='+this.stateCount)

      SonComponent()
    }
    .height('100%')
    .width('100%')
  }
}

SonComponent

import {
    GrandsonComponent } from './GrandsonComponent'

@Component
export struct SonComponent {
   
  build() {
   
    Column({
    space: 10 }) {
   
      Text('这是子组件')

      GrandsonComponent()
    }
    .width('100%')
    .padding(10)
    .backgroundColor(Color.Orange)
  }
}

GrandsonComponent

@Component
export struct GrandsonComponent {
   
  @Consume('count') grandsonCount: number

  build() {
   
    Column({
   space:10}){
   
      Text('孙组件')
      Button('增加次数').onClick(()=>{
   
        this.grandsonCount++
      })
      Text('grandsonCount='+this.grandsonCount)
    }
    .width('100%')
    .padding(10)
    .backgroundColor('#EEEEEE')
  }
}
目录
相关文章
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
312 0
|
4月前
|
安全 API 开发工具
【HarmonyOS NEXT】一键扫码功能
这些Kit为我们应用开发提升了极大地效率。很多简单的功能,如果不需要太深的定制化需求,直接调用kit提供的API就可以实现,在android或者ios上需要很多代码才能实现的功能效果。
119 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
18天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
90 0
|
18天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
178 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
18天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
50 0
|
18天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
150 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例

热门文章

最新文章