鸿蒙开发 组件之间的传值

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

}