【鸿蒙应用开发】对导入的子组件进行数据双向传递和单向传递

双向传递

用@Provide和@Consume

如果需要对导入的子组件进行双向传递的话，provide和consume是最好的选择

首先在组件里需要提供一个变量

需要注意的是@Provide的变量和@Consume的变量需要保持名称一致，否则就需要加括号对其起别名保持一致

比如：

@Provide('test') man:string='man'//提供的变量

@Consume('test') manba:string//订阅的变量

@Consume不能初始化值

以上是对名称不一致的订阅方法代码示例

需要注意，provide和consume之间的传递是双向传递，且传递是靠名称识别的，我们调用的时候无需进行传参

下面是如何进行和子组件的双向传递：

@Provide token:string='Index'//在主组件里提供一个变量

这个是子组件：

@Component
export  default struct Show{
 @Consume token:string//订阅的变量

 build(){
 Row(){
 Text("导入的子组件Consume："+this.token)
 Button(){
 Text('点一下').fontSize(30)
 }.onClick(()=>{
 this.token='Consume'
 })
 }

 }
}

对于导出，我们往往需要用export default

需要注意，对于子组件切记不可加‘@Entry’，虽然这样可以进行预览，但是如果加的话会导致导入这个子组件时候预览是一片空白

然后我们在主组件里进行调用这个子组件：

import Show from '../View/Show'//首先需要导入这个子组件
@Entry
@Component
struct Index {
 @State message: string = 'Hello World'
 @Provide token:string='Index'//在这里提供一个变量
 build() {
 Row() {
 Column() {
 Text('主页：'+this.token)
 .fontSize(50)
 .fontWeight(FontWeight.Bold)
 Button(){
 Text('点一下').fontSize(30)
 }.onClick(()=>{
 this.token='Provide'
 })

 Show(）//在这里调用这个子组件，需要注意的是对于provide和consume不需要往括号里传参
 }
 .width('100%')
 }
 .height('100%')
 }
}

这个时候我们点一下按钮会发现子组件的变化也会影响到主组件

单向传递

如果要进行单向传递，可以用@Prop

@State和@Prop的传递方法很简单

首先声明一个state变量

@State message:string='hello'

然后子组件里prop一个变量，这个名称无需保持一致

@Prop prop_message:string

但是需要注意，无论是@Consume还是@Prop和@Link，都不能初始化值

然后我们导出这个子组件，同样不要加@Entry

@Component
export default struct Prop_test{
 @Prop prop_message:string
 build(){
 Row(){
 Text('Prop'+this.prop_message)
 Button(){
 Text('点一下').fontSize(30)
 }.onClick(()=>{
 this.message='Prop'
 })
 }
 }
}

然后我们把这个子组件导入，在主组件里调用时候是需要进行传参的

Prop_test({prop_message:this.message})//这么调用和传参

写在最后

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

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

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

请点击→纯血版全套鸿蒙HarmonyOS学习文档

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

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

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

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

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

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

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

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

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

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

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