鸿蒙开发 组件之间的传值

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()

}

5.eventHub通知

引入

import common from '@ohos.app.ability.common'
定义
private  context = getContext(this) as common.UIAbilityContext

发送

this.context.eventHub.emit('todayclick',1)

监听

this.context.eventHub.on('todayclick', (data: number) => {
 //方法 this.gettodaycal()
 });

### 鸿蒙开发中父子组件间的双向数据递方法 #### 使用 `@Provide` 和 `@Consume` 在鸿蒙应用开发过程中,为了实现父子组件之间的双向数据绑定,可以采用 `@Provide` 和 `@Consume` 注解来完成这一功能[^1]。具体来说: - **父组件**:利用 `@Provide` 提供共享的数据源; - **子组件**:通过 `@Consume` 接收来自父级提供的数据。 这种机制允许当任一方更新其持有的时,另一方能够立即感知到变化并作出相应调整,从而实现了真正的双向同步效果。 ```java // 父组件 ParentComponent.java import ohos.aafwk.ability.AbilitySlice; import ohos.data.annotation.Provide; public class ParentComponent extends AbilitySlice { @Provide private String sharedData = "Initial Value"; public void updateSharedData(String newValue){ this.sharedData = newValue; // 更新后的会自动播至所有消费端 } } ``` ```java // 子组件 ChildComponent.java import ohos.aafwk.ability.AbilitySlice; import ohos.data.annotation.Consume; public class ChildComponent extends AbilitySlice { @Consume private String parentProvidedData; protected void onStart(Intent intent) { super.onStart(intent); System.out.println("Received data from parent:" + parentProvidedData); } public void modifyParentData(){ ((ParentComponent)getAbility()).updateSharedData("Modified by child"); } } ``` #### 利用 `@Link` 或者 `@ObjectLink` 对于只需要单向输且不需要回更改的情况,则推荐使用更为轻量级的方法——即基于 `@Link` 或者 `@ObjectLink` 的属性链接方式[^3]。相较于统的 `@Prop` 方式而言,这两种方案不仅效率更高而且能更好地保持对象类型的完整性。 需要注意的是,虽然这些标签简化了编程模型,但在实际项目里仍需谨慎设计接口契约以确保系统的稳定性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值