鸿蒙开发 组件之间的传值

1.@Prop:父组件传递给子组件,单向传递,子组件改变值,父组件UI不更新。

引入子组件 并赋值,子组件用@Prop 接收

import headerView from '../../common/bean/BaseNavHeaderView'

复制代码
headerView({
  titlestr:'添加地址',
  isback:true,
  isleftimage:'',
  isright:true,
  rightcontentstr:'保存',
  rightimage:'',
  fromehere:'添加地址',
  startCalcute:this.startCalcuteMoney.bind(this)
}).width('100%').height('44').backgroundColor('#FFD615').zIndex(888)
复制代码
@Component
export default  struct BaseNavHeaderView {

  @Prop titlestr:string;
        isback:Boolean;
        isleftimage:string;
        isright:Boolean;
        rightcontentstr:string;
       rightimage:string;
       fromehere:string;
      startCalcute:() => void = () =>{}

2.@Link 双向传递,子组件改变父组件UI更新,注意:不能修饰带@Entry 类型的pages.

父试图定义变量,传递给子组件child时要用$

复制代码
@State dianjicounts:number = 0

child({dianjicounts:$dianjicounts})

子组件接收

@Component export default struct child {

@Link dianjicounts:number

调用用this.dianjicounts

}

3.@Provide/@Consume 不需要传递参数,UI会更新

父组件定义并调用子组件

@Provide dianjicounts: number = 0

child()

子组件接收

@Component export default struct child {

@Consume dianjicounts:number

调用用this.dianjicounts

}

4.方法传递

父组件定义方法

startCalcuteMoney():void{

console.log('保存一下')

}

传给子组件,要用bind方法绑定一下

headerView({

startCalcute:this.startCalcuteMoney.bind(this)

})

子组件接收

@Component export default struct BaseNavHeaderView {

@Prop startCalcute:() => void = () =>{}

子组件调用

this.startCalcute()

}

相关推荐
逻极1 小时前
HarmonyOS 5 鸿蒙应用性能优化与调试技巧
华为·性能优化·harmonyos·鸿蒙
std78797 小时前
鸿蒙与安卓系统的优劣分析
鸿蒙
后端小张14 小时前
【鸿蒙开发手册】重生之我要学习鸿蒙HarmonyOS开发
开发语言·学习·华为·架构·harmonyos·鸿蒙·鸿蒙系统
SWUT胖虎15 小时前
ArkTS 中@Extend 和@Styles 装饰器的用法和区别
harmonyos·arkts·鸿蒙·鸿蒙系统
鸿蒙小白龙1 天前
基于 OpenHarmony 6.0 的智能充电桩技术方案与实现
能源·harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙2 天前
Openharmony应用开发之Ability异常退出与UIAbility数据备份开发实战
harmonyos·鸿蒙·鸿蒙系统·open harmony
Damon小智2 天前
RedPlayer 视频播放器在 HarmonyOS 应用中的实践
音视频·harmonyos·鸿蒙·小红书·三方库·redplayer
AirDroid_cn2 天前
明知手机忘带却不着急回去拿,因为可以远程控制
智能手机·安卓·远程工作·远程控制·远程控制手机
鸿蒙小白龙3 天前
OpenHarmony 与 HarmonyOS 的 NAPI 开发实战对比:自上而下与自下而上的差异解析
harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙3 天前
OpenHarmony平台大语言模型本地推理:llama深度适配与部署技术详解
人工智能·语言模型·harmonyos·鸿蒙·鸿蒙系统·llama·open harmony