【鸿蒙实战开发】组件间的数据传递

于 2024-07-09 17:38:54 发布
阅读量979 收藏 6
点赞数 26
分类专栏： 鸿蒙 安卓 前端 文章标签： harmonyos android 华为 鸿蒙 安卓 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS_002/article/details/140302055
版权
鸿蒙 同时被 3 个专栏收录
46 篇文章 0 订阅
订阅专栏
安卓
45 篇文章 0 订阅
订阅专栏
前端
38 篇文章 0 订阅
订阅专栏

1、父传子@State和@Prop

父组件

// 导入子组件
import Child01 from '../components/Child01'

@Entry
@Component
struct StateExample {
  @State count: number = 0
  build() {
    Column() {
      Text("计数器 count：" + this.count)
      Button('count + 1').onClick(() => {
        // 这里使用 this.count++ 会有问题
        this.count += 1
      })
      Child01({ a: this.count }).margin({ top: 10 })
    }.width('100%')
    .height(300)
  }
}

子组件

@Component
export default struct Child01 {
  // 使用@Prop定义父传子数据,数据单向流动
  @Prop a: number;
  build() {
    Column() {
      Text('我是子组件Child1')
      Text('父组件传递的count:  ' + this.a)
      Button('修改父组件count数据').onClick(() => {
        this.a -= 1
      }).margin({bottom:5})
    }.width('100%').border({ width: 1, color: Color.Black })
  }
}

注意：使用@State和@Prop进行父子组件数据通信时，数据流是单向的；父组件修改count子组件可以动态更新，而子组件无法修改父组件的数据

2、父子通信@Link($state属性)

父组件

// 导入子组件
import Child02 from '../components/Child02'

@Entry
@Component
struct StateExample {
  @State count1: number = 199

  build() {
    Column() {
      Text("计数器 count1：" + this.count1)
      Button('count1 + 1').onClick(() => {
        // 这里使用 this.count++ 会有问题
        this.count1 += 1
      }).margin({ top: 5 })
      Child02({ b: $count1 }).margin({ top: 10 })
    }.width('100%')
    .height(300)
  }
}

子组件

@Component
export default struct Child02 {
  // @Link 实现父子组件的双向流动
  @Link b:number ;
  build() {
    Column({space:10}){
      Text('我是子组件Child2')
      Text('父组件传递过来的count1:  '+this.b)
      Button('修改父组件count1数据').onClick(() => {
        this.b -= 1
      }).margin({bottom:5})
    }.width('100%')
    .border({width:1,color:Color.Pink})
  }
}

在这里插入图片描述

注意：此方式父子数据传递，数据流是双向的；父修改数据子跟这边，同理子修改数据父也跟着变

3、父子通信@Provide和@Consume

顾名思义：提供数据，消费数据

父组件

// 导入子组件
import Child03 from '../components/Child03'

@Entry
@Component
struct StateExample {
  @Provide money: number = 10000000

  build() {
    Column() {
      Text("父组件的钱数 money：" + this.money)
      Button('money + 3').onClick(() => {
        // 这里使用 this.count++ 会有问题
        this.money += 3
      }).margin({ top: 5 })
      Child03().margin({top:10})
    }.width('100%')
    .height(300)
  }
}

子组件

@Component
export default struct Child03 {
  @Consume money:number;
  build() {
    Column() {
      Text(`孙子组件有的money:${this.money}`)
      Button('修改money').onClick(() => {
        this.money -=1
      }).margin({top:10,bottom:10})
    }
    .width('100%')
    .border({ width: 1, color: Color.Pink })
  }
}

注意：此方式祖孙数据传递，数据流是双向的；和@Link很像，但是它可以实现祖孙之间的数据双向流动

4、组件传递引用数据类型-对象

父组件

import Child04 from '../components/Child04'
import Child05 from '../components/Child05'
import Child06 from '../components/Child06'

@Entry
@Component
struct CompoundExample {

  // @State定义复杂类型
  @State obj: {
    a: number,
    b: { c: number }
  } = { a: 100, b: { c: 200 } }

  // 数组类型
  @State arr: [{
    a: number,
    b: { c: number }
  }] = [{ a: 11, b: { c: 22 } }]

  build() {
    Column() {
      Text('父组件的复杂类型：\r\n' + JSON.stringify(this.obj)).fontSize(15)
      Button('修改obj').onClick(() => {
        // this.obj = {a:99,b:{c:19}} // 监听到
        // this.obj.a = 199 // 监听到
        this.obj.b = { c: 111 } // 监听到
        // this.obj.b.c = 21 // 超过一层则无法监听到
      })
      Child04({ obj: this.obj })
      // 通过@Link方式传递
      Child05({ obj: $obj }).margin({ top: 10 })
      // 数组类型传递
      // Child06({ arr: this.arr })
      Child06({ arr: $arr })
    }.width('100%')
    .border({ width: 1, color: Color.Pink })
  }
}

子组件

@Component
export default struct Child04 {
  @Prop obj: {
    a: number,
    b: { c: number }
  }
  build() {
    Column() {
      Text('子组件Child04')
      Text('获取父组件传递的复杂类型：\r\n' + JSON.stringify(this.obj))
      Button('修改父组件obj').onClick(() => {
        // this.obj.a = 99 // 监听到，数据单向传递
        // this.obj.b = { c: 101 } // 监听到
        this.obj.b.c = -1 // 超过一层，无法监听

      })
    }.width('100%')
    .border({ width: 1, color: Color.Red })
  }
}

5、组件传递引用数据类型-数组

父组件

import Child04 from '../components/Child04'
import Child05 from '../components/Child05'
import Child06 from '../components/Child06'

@Entry
@Component
struct CompoundExample {

  // @State定义复杂类型
  @State obj: {
    a: number,
    b: { c: number }
  } = { a: 100, b: { c: 200 } }

  // 数组类型
  @State arr: [{
    a: number,
    b: { c: number }
  }] = [{ a: 11, b: { c: 22 } }]

  build() {
    Column() {
      Text('父组件的复杂类型：\r\n' + JSON.stringify(this.obj)).fontSize(15)
      Button('修改obj').onClick(() => {
        // this.obj = {a:99,b:{c:19}} // 监听到
        // this.obj.a = 199 // 监听到
        this.obj.b = { c: 111 } // 监听到
        // this.obj.b.c = 21 // 超过一层则无法监听到
      })
      Child04({ obj: this.obj })
      // 通过@Link方式传递
      Child05({ obj: $obj }).margin({ top: 10 })
      // 数组类型传递
      // Child06({ arr: this.arr })
      Child06({ arr: $arr })
    }.width('100%')
    .border({ width: 1, color: Color.Pink })
  }
}

子组件

@Component
export default struct Child06 {
  // @Prop arr: [{
  //   a: number,
  //   b: { c: number }
  // }]

  @Link arr: [{
    a: number,
    b: { c: number }
  }]

  build() {
    Column() {
      Text('子组件Child06通过@Link获取父组件传递的复杂类型arr:' + JSON.stringify(this.arr))
      Button('修改父组件arr').onClick((event: ClickEvent) => {
        // 替换
        // this.arr = [{ a: 101, b: { c: 202 } }]
        // 修改
        this.arr[0].a = 909 // 无效的
      })
    }.width('100%')
    .border({ width: 1, color: Color.Blue })
  }
}

在这里插入图片描述

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

在这里插入图片描述

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

「已注销」
关注
  • 26
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙第二次
m0_63222947的博客
06-14 303
无
HarmonyOS 2.0鸿蒙应用开发实战教程视频教程
06-16
HarmonyOS 2.0是华为推出的面向全场景的分布式操作系统，旨在打破设备间的界限，提供无缝的用户体验。作为一款开放源码的操作系统，它为开发者提供了丰富的工具和平台，以便构建跨平台、多设备的应用程序。本教程将...
鸿蒙开发 组件之间的传值
qq_33067629的博客
05-21 875
鸿蒙开发组件中传值
鸿蒙：ArkTS语言的子组件正确使用与传参方式（学习笔记版）
qq_42349944的博客
12-27 3383
子组件必须的组成要素：（1）@Component 装饰器（2）struct 关键字（3）build() 函数@Component...build() {...若子组件单独定义在一个文件中时，需要使用export导出子组件。@Entry@Componentbuild() {// 直接使用子组件//引入子组件@Entry@Componentbuild() {// 先引入再使用子组件。父子组件传参。
鸿蒙系列--自定义组件
weixin_42277946的博客
01-03 2256
鸿蒙系列--自定义组件
鸿蒙4.0开发笔记之ArkTS语法基础之数据传递与共享详细讲解（十八）
Viewinfinitely的博客
12-08 4810
使用router.pushUrl进行路由跳转，从而实现页面间的数据传递。这个方法可以实现一个页面向另一个指定页面的数据传递和共享。页面间数据共享是一种全局的数据共享方法，可以在所有页面之间进行数据共享。实现方法就是在`EntryAbility.ts`文件中使用`AppStorage.SetOrCreate()`进行数据的定义。
最新鸿蒙HarmonyOS开发文档汇总.zip
08-03
HarmonyOS开发文档（二）； HarmonyOS开发文档（一）； HarmonyOS入门文档； HarmonyOS设备应用开发文档； HarmonyOS应用设计文档； HarmonyOS智慧屏设计文档； HarmonyOS智能穿戴应用设计文档； Huawei DevEco ...
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS...
HarmonyOS 2.0鸿蒙应用开发实战教程视频教程2.4G
06-16
鸿蒙应用开发实战教程视频教程2.4G涵盖了从基础到进阶的全面内容，帮助开发者掌握在HarmonyOS上构建应用的核心技能。 在本教程中，你将学习到以下几个重要的知识点： 1. **HarmonyOS概述**：了解HarmonyOS的设计...
HarmonyOS应用开发实战-容器组件.docx
06-03
HarmonyOS应用开发实战-容器组件
【鸿蒙（ArkTs）开发---父子组件中的通讯（修饰符@State、 @Prop、@Link、@Provide、@Consume）】
我是盒饭 努力搬砖的码农
01-19 1189
【代码】【鸿蒙（ArkTs）开发---父子组件中的通讯（修饰符@State、 @Prop、@Link、@Provide、@Consume）】
Harmony OS 父子组件传参
qq_35946021的博客
03-04 1117
要改变message时，父组件的message改变不了，只能改变子组件的参数。时，改变message值，参数跟着更新。并且子组件也跟着更新（类似于vue的prop传参，只能父组件传参给子组件。
HarmonyOS 应用开发之同应用跨设备数据同步
1
04-02 668
键值型数据库适合不涉及过多数据关系和业务关系的业务数据存储，比SQL数据库存储拥有更好的读写性能，同时因其在分布式场景中降低了解决数据库版本兼容问题的复杂度，和数据同步过程中冲突解决的复杂度而被广泛使用。
鸿蒙开发页面之间如何传值
qq_43238112的博客
02-04 1665
在鸿蒙开发中如果使用route的方式传递参数用如下写法。
HarmonyOS父子组件传递参数
最新发布
小火车况且况且况且的博客
06-21 794
State。
鸿蒙应用开发——ArkTS 组件状态管理（一）@State、@Prop、@Link、@Provide和@Consume、@Watch的使用详细教程含示例代码
m0_73950008的博客
06-04 1239
父组件通过 @State修饰符 定义变量，子组件通过。
鸿蒙自定义组件内自定义构建函数
baidu_24743861的博客
01-25 1005
自定义构建函数的参数传递有和。
鸿蒙HarmonyOS开发：@Builder装饰器，自定义构建函数
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-16 1698
ArkUI还提供了一种更轻量的UI元素复用机制@Builder，@Builder所装饰的函数遵循build()函数语法规则，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。为了简化语言，我们将@Builder装饰的函数也称为“自定义构建函数”。允许在自定义组件内定义一个或多个@Builder方法，该方法被认为是该组件的私有、特殊类型的成员函数。自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值