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

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐