【鸿蒙南向开发】OpenHarmony应用组件间通信

已于 2024-07-16 16:41:56 修改
阅读量657 收藏 7
点赞数 11
分类专栏： 鸿蒙 前端 安卓 文章标签： harmonyos 华为 鸿蒙 前端 安卓
于 2024-07-16 16:37:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS_666/article/details/140469965
版权
鸿蒙 同时被 3 个专栏收录
51 篇文章 0 订阅
订阅专栏
前端
51 篇文章 0 订阅
订阅专栏
安卓
51 篇文章 0 订阅
订阅专栏

前言

ETS(基于 TS 扩展的声明式开发范式)提供了强大的组件化能力，支持开发者高效的构建应用的 UI 界面，然而每一个组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，因此组件间的相互通信是非常重要的。

组件间通信原理

ETS 组件间通信是通过组合不同的装饰器来实现数据在各个组件之间的单向/双向传递。

相关装饰器介绍

在这里插入图片描述

组件间通信实现

父子组件通信

数据单向传递

使用 @State 和 @Prop 装饰器可以实现父组件向子组件单向传递数据。

●定义子组件 Child

@Component
struct Child {
    @Watch("listenChildCount") //当count变量值发生变化，会调用listenChildCount()
    @Prop
    count: number;
    build() {
        Column() {
                Text("子组件:" + this.count).fontSize(30)
                Button("reduce")
                    .fontSize(25)
                    .onClick(() => {
                        this.count--;
                    })
            }
            .border({ width: 2, color: Color.Blue })
            .backgroundColor(Color.Green)
            .width("50%")
            .height("50%")
    }

    /**
     * 用于监听count变量的变化
     */
    listenChildCount() {
        console.info("ChildComponent count changed:" + this.count)
    }
}

●定义父组件，在父组件中嵌套子组件 Child，并将父组件中的 count 变量传递给子组件

@Entry
@Component
struct Parent {
    @State
    @Watch("listenCount") //当count变量值发生变化，会调用listenCount()
    count: number = 0;
    build() {
        Column() {
            Column() {
                    Text("父组件:" + this.count)
                        .fontSize(30)
                        .fontColor(Color.Red)
                    Button("add")
                        .fontColor(Color.White)
                        .fontSize(30)
                        .backgroundColor(Color.Orange)
                        .onClick(() => {
                            this.count++;
                        })
                    Child({ count: this.count })
                }.border({ width: 2, color: Color.Black })
                .width("100%")
                .height(400)
                .backgroundColor(Color.Gray)
        }
    }
    listenCount() {
        console.info("ParentComponent count changed:" + this.count)
    }
}

效果如下：
在这里插入图片描述

数据双向传递

@State/@Link 实现父子组件数据双向传递

●将上文的子组件中 count 变量上的装饰器改为 @Link

@Component
struct Child {
    @Link
    @Watch("listenCount")
    count: number;
    build() {
            ...
            ...
        }
        ...
}
​

●改变上文中父组件传递数据到子组件的方式

@Entry
@Component
struct Parent {
    ...
    build() {
        Column() {
            ...
            ...
            Child({ count: $count }) //@Link需要用'$'符号传递变量
        }.border({ width: 2, color: Color.Black })
        .width("100%")
        .height(400)
        .backgroundColor(Color.Gray)

    }
    ...
}
​

效果如下：

在这里插入图片描述

@Provide/@Consume 实现父子组件数据双向传递

将上文父组件中 count 变量上的装饰器替换为 @Provide,子组件中 count 变量上的装饰器替换成 @Consume:

@Entry
@Component
struct Parent {
    //这里@Provide必须放在@Watch的上面，否则会报错
    @Provide("Count")
    @Watch("listenCount") //当count变量值发生变化，会调用listenCount()
    count: number = 0;
    build() {
        Column() {
            Column() {
                    Text("父组件:" + this.count)
                        .fontSize(30)
                        .fontColor(Color.Red)

                    Button("add")
                        .fontColor(Color.White)
                        .fontSize(30)
                        .backgroundColor(Color.Orange)
                        .onClick(() => {
                            this.count++;
                        })
                    Child() //使用@Provide 、@Consume不需要像@Link、@Prop那样传数据
                }.border({ width: 2, color: Color.Black })
                .width("100%")
                .height(400)
                .backgroundColor(Color.Gray)
        }
    }
    listenCount() {
        console.info("ParentComponent count changed:" + this.count)
    }
}

@Component
struct Child {
    //这里@Consume必须放在@Watch的上面，否则会报错
    @Consume("Count") //@Consume的参数值必须和对应的@Provide的参数值一致
    @Watch("listenChildCount") //当count变量值发生变化，会调用listenChildCount()
    count: number;
    build() {
        Column() {
            Text("子组件:" + this.count)
                .fontSize(30)
            Button("reduce")
                .fontSize(25)
                .onClick(() => {
                    this.count--;
                })
        }
        .border({ width: 2, color: Color.Blue })
        .backgroundColor(Color.Green)
        .width("50%")
        .height("50%")
    }
    listenChildCount() {
        console.info("ChildComponent count changed:" + this.count)
    }
}
​

效果：效果与上一步相同

@Provide/@Consume 实现组件跨层级双向传递数据

●定义子组件 GrandChild

@Component
struct GrandChild {
    @Consume
    count: number;
    build() {
        Column() {
            Text("GrandChild:" + this.count)
                .fontSize(30)
            Button("reduce")
                .fontSize(25)
                .onClick(() => {
                    this.count--;
                })
        }
        .border({ width: 2, color: Color.Blue })
        .backgroundColor(Color.Gray)
        .width(200)
        .height(180)
    }
}

●定义子组件 Child，在 Child 组件中嵌套 GrandChild 组件

@Component
struct Child {
    build() {
        Column() {
            Text("Child")
                .fontSize(40)
                .margin({ top: 25 })
            GrandChild()
        }
        .border({ width: 2, color: Color.Blue })
        .backgroundColor(Color.Green)
        .width(300)
        .height(300)
    }
}

●定义父组件 Parent，在 Parent 组件中嵌套 Child 组件

@Entry
@Component
struct Parent {
    @Provide("Count")
    count: number = 0;
    build() {
        Column() {
            Column() {
                Text("Parent:" + this.count)
                    .fontSize(30)
                    .fontColor(Color.Red)

                Button("add")
                    .fontColor(Color.White)
                    .fontSize(30)
                    .backgroundColor(Color.Orange)
                    .onClick(() => {
                        this.count++;
                    })
                Child()
            }.border({ width: 2, color: Color.Black })
            .width("100%")
            .height(400)
            .backgroundColor(Color.Gray)
        }
    }
}
​

效果如下：
在这里插入图片描述

兄弟组件通信

ETS 中要实现兄弟组件间传递数据需要借助第三个组件，即两个需要传递数据的组件需要有共同的父组件

@Provide/@Consume 实现兄弟组件双向传递数据

●定义子组件 Child1、Child2,并用 @Consume 装饰对应变量

@Component
struct Child1 {
    @Consume("Count")
    count1: number
    build() {
        Column() {
            Text("Child1:" + this.count1)
                .fontSize(40)
            Button("add")
                .fontColor(Color.White)
                .fontSize(30)
                .backgroundColor(Color.Orange)
                .onClick(() => {
                    this.count1++;
                })
        }
        .border({ width: 2, color: Color.Blue })
        .backgroundColor(Color.Green)
        .width("100%")
        .height(180)
    }
}

@Component
struct Child2 {
    @Consume("Count")
    count2: number;
    build() {
        Column() {
            Text("Child2:" + this.count2)
                .fontSize(30)
            Button("reduce")
                .fontSize(25)
                .onClick(() => {
                    this.count2--;
                })
        }
        .border({ width: 2, color: Color.Blue })
        .backgroundColor(Color.Yellow)
        .width("100%")
        .height(180)
    }
}
​

●定义父组件 Parent，嵌套组件 Child1、Child2

@Entry
@Component
struct Parent {
    @Provide("Count")
    count: number = 0;
    build() {
        Column() {
            Child1()
            Child2()
        }
        .width("100%")
        .height("100%")
    }
}
​

效果如下：

在这里插入图片描述

@State 和 @Link 实现兄弟组件双向传递数据

●将子组件 Child1 和 Child2 中 count 变量上的装饰器改为 @Link

@Component
struct Child1 {
    @Link
    count1: number
    build() {
        ...
        ..
    }

}
@Component
struct Child2 {
    @Link
    count2: number;
    build() {
        ...
        ...
    }
}
​

●将上一步父组件 Parent 中 count 变量上的装饰器改为 @State

@Entry
@Component
struct Parent {
    @State
    count: number = 0;
    build() {
        ...
        Child1({ count1: $count })
        Child2({ count2: $count })
            ...
    }
}
​

效果：与上一步的效果相同

任意组件通信

借助 AppStorage 和 @StorageLink 可以实现任意两个组件(包括同一个页面里的两个组件、不同页面里的组件、不同 Ability 里的两个组件)

AppStorage/@StorageLink 实现不同页面组件间传递数据

●定义页面 Page1

import router from '@ohos.router'; //router用于进行页面跳转
AppStorage.SetOrCreate("Count", 0); //先向AppStorage中存一个key:value
@Entry
@Component
struct Component1 {
    @StorageLink("Count")
    count: number = AppStorage.Link("Count") //与AppStorage进行双向绑定，用AppStorage里的值初始化count
    build() {
        Column() {
            Text("页面1:" + this.count)
                .fontSize(50)

            Button("add")
                .margin({ bottom: 25 })
                .onClick(() => {
                    this.count++;
                })
            Button("跳转")
                .fontSize(25)
                .onClick(() => {
                    router.push({ url: "pages/page2" })
                })
        }.border({ width: 2, color: Color.Blue })
        .width("100%")
        .height(400)
        .backgroundColor(Color.Gray)
    }
}
​

●定义页面 Page2

import router from '@ohos.router';
@Entry
@Component
struct Component2 {
    @StorageLink("Count")
    count: number = AppStorage.Link("Count") //与AppStorage进行双向绑定，用AppStorage里的值初始化count
    build() {
        Column() {
            Text("页面2:" + this.count)
                .fontSize(50)
                .fontColor(Color.Green)

            Button("reduce")
                .margin({ bottom: 25 })
                .onClick(() => {
                    this.count--;
                })
            Button("跳转")
                .fontSize(25)
                .onClick(() => {
                    router.back({ url: "pages/page1" })
                })
        }.border({ width: 2, color: Color.Blue })
        .width("100%")
        .height(400)
        .backgroundColor(Color.Orange)
    }
}
​

效果如下：
在这里插入图片描述

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。

在这里插入图片描述

鸿蒙初辟梦创道远
关注
  • 11
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本...
HarmonyOS与OpenHarmony应用开发差异.docx
06-03
HarmonyOS与OpenHarmony应用开发差异.docx
【鸿蒙（ArkTs）开发---父子组件中的通讯（修饰符@State、 @Prop、@Link、@Provide、@Consume）】
我是盒饭 努力搬砖的码农
01-19 1198
【代码】【鸿蒙（ArkTs）开发---父子组件中的通讯（修饰符@State、 @Prop、@Link、@Provide、@Consume）】
【鸿蒙南向开发】OpenHarmony应用开发模型详解
HarmonyOS_666的博客
07-16 610
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
嵌入式开发转鸿蒙南向（OpenHarmony）有哪些优势？一文讲透~
m0_70748458的博客
06-30 760
随着物联网和智能设备的快速发展，嵌入式开发和鸿蒙系统成为了当前技术领域的热门话题。鸿蒙系统作为华为推出的全场景分布式操作系统，旨在连接各种智能设备，提供无缝的跨设备体验。而南向开发则是鸿蒙系统中的一个重要方向，主要涉及设备内部嵌入式开发。那么，嵌入式开发是否适合做鸿蒙南向开发呢？本文将从几个方面进行探讨。
【鸿蒙南向开发实战教程】OpenHarmony中SystemAbility的实现方法详解
HarmonyOS_001的博客
06-20 755
在系统服务管理子系统中safwk组件定义OpenHarmony中SystemAbility的实现方法，并提供启动、注册等接口实现。系统架构图 1 系统服务框架图定义该服务对外提供的能力集合函数，统一继承IPC接口类IRemoteBroker；同时实现该IPC对外接口唯一标识符DECLARE_INTERFACE_DESCRIPTOR(XXX);该标识符用于IPC通信的校验等目的。
【鸿蒙南向实战开发实例】OpenHarmony多线程能力场景化示例
HarmonyOS_001的博客
06-20 994
并发的意思是多个任务同时执行。并发模型分为两大类：基于内存共享的并发模型和基于消息传递的并发模型。在基于内存共享的并发模型中，并发线程通过读写内存中的共享对象来进行交互。基于共享内存的并发编程需要满足三条性质：●原子性：指一个操作是不可中断的，要么全部执行成功要么全部执行失败。●有序性：指程序执行的顺序必须符合预期，不能出现乱序的情况。●可见性：指当一个线程修改了共享变量后，其他线程能够立即得知这个修改。现代程序语言一般通过锁、内存屏障、原子指令来满足这三条性质。
什么是鸿蒙Harmony南向驱动开发？
shudaoshanQAQ的博客
02-25 1542
OpenHarmony采用多内核（Linux内核或者LiteOS）设计，支持系统在不同资源容量的设备部署
Harmony鸿蒙南向设备开发MQTT通信协议
m0_70749039的博客
06-20 924
相信MQTT这个名称大家都不陌生
OpenHarmony学习笔记——南向开发环境搭建
qq_41954556的博客
03-11 9666
此系列主要是记录笔者基于Hi3861的OpenHarmony学习笔记。
【鸿蒙南向开发】OpenHarmony IPC 之ServiceAbility应用（系统架构）
HarmonyOS_666的博客
07-17 609
IPC 是用于进程间通信的技术，指的是进程间的数据交互过程。它包括各种形式的消息传递，共享资源，以及同步对象，如互斥量等，以确保安全的并发访问共享资源。IPC 通常使用 Binder 驱动，主要用于设备内的跨进程通信，如 OpenHarmony 系统中的进程间通信。IPC 与 RPC（Remote Procedure Call）机制用于实现跨进程通信，不同的是前者使用 Binder 驱动，用于设备内的跨进程通信，而后者使用软总线驱动，用于跨设备跨进程通信。
基于C和Python的OpenHarmony应用开发源码
04-05
本资源提供了一套基于C和Python语言的OpenHarmony应用开发源码。项目文件共242个，包括142个C源文件、86个头文件、5个mk文件、5个Python脚本以及相关的许可证、Makefile、Markdown文档和gn文件。该源码旨在帮助...
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
在“HCIA-HarmonyOS应用开发工程师 V2.0 ...这些知识点涵盖了HarmonyOS应用开发的基础概念、组件使用、通信机制、应用生命周期、UI设计以及开发工具的使用技巧，是成为一名合格的HarmonyOS应用开发工程师必备的知识。
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS 移动应用开发（ArkTS版）是面向开发者的一门课程，旨在教授如何使用 ArkTS 语言在 HarmonyOS 上构建高效、跨平台的应用。本课程由刘安战、余雨萍、陈争艳三位专家编著，由清华大学出版社出版。 ArkTS 是 ...
【HarmonyOS学习】Calendar Kit日历管理
包包熊的博客
07-16 676
Calendar Kit为用户提供了一系列接口来获取日历账户，并使用特定的接口向日历账户中写入日程。 如果写入的日程带有提醒时间则系统会在时间到达时向用户发送提醒。
鸿蒙语言基础类库：【@system.router (页面路由)】
最新发布
2301_76813281的博客
07-18 740
以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。示例中的uri字段是页面路由，由配置文件中的pages列表指定。清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。用应用内的某个页面替换当前页面，并销毁被替换的页面。获取当前在页面栈内的页面数量。获取当前页面的参数信息。
【HarmonyOS学习】动画
包包熊的博客
07-16 384
分类介绍了常用动画的类型，并包含相关示例代码方便学习
鸿蒙Navigation路由能力汇总
qq_36859035的博客
07-17 205
属性汇总：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值