鸿蒙开发组件之间的传值

R码农2024-05-22 15:55

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

}

鸿蒙开发 组件之间的传值

鸿蒙开发组件之间的传值