【鸿蒙（ArkTs）开发---父子组件中的通讯（修饰符@State、 @Prop、@Link、@Provide、@Consume）】

使用修饰符实现组件中通讯（传值、修改值）

1. @State：装饰的变量值修改时，页面也会随之更新

2. @Prop：配合@State使用，实现页面单向传递 数据从父组件传入子组件，在子组件中修改则父组件ui不更新 （传递值时使用this.）

父组件

import  My from '../view/My'//引入子组件
@Entry
@Component
struct Index {
  @State showNumber2:number=0
  build() {
    Column() {
      Row() {
        Text('showNumber2：'+this.showNumber2)
          .fontSize(40)
      }
      .width('100%')
      Row() {
      Button('加1').width('100%').height(50).onClick(()=>{
        this.showNumber2++
      })
      }
      .width('100%')
      Row(){
        My({
          showNumber2:this.showNumber2,
          //由于@Prop装饰器是单向传递 所以可以使用回调函数的方式来修改父组件的值
          giveIndex:(data)=>{
            if(data){
              this.showNumber2=parseInt(data)
            }else {
              this.showNumber2=0
            }
        }})
      }.width('100%')
    }
    .height('100%')
    .width('100%')

  }
}

子组件

@Component
export default struct My {
  @Prop showNumber2:number
  // 回调函数
  giveIndex=(data)=>{
  }
  build() {
    Column() {
      Row() {
        Text('@Prop装饰器：')
        TextInput({text:JSON.stringify(this.showNumber2)})
          .width('100%')
          .type(InputType.Number)
          .height(50)
          .onChange((value)=>{
            //使用回调可以修改父组件的值
            //this.giveIndex(value)
            //传入修改无效
            if(value){
              this.showNumber2=parseInt(value)
            }else  {
              this.showNumber2=0
            }
          })
      }
      .width('50%')
    }
  }
}

3.@Link：配合@State使用，实现页面双向传递 数据从父组件传入子组件，在子组件中修改则父组件ui更新 （传递值时使用$）

父组件

import  My from '../view/My'//引入子组件
@Entry
@Component
struct Index {
  @State showNumber1:number=0
  build() {
    Column() {
      Row() {
        Text('showNumber1：'+this.showNumber1)
          .fontSize(40)
      }
      .width('100%')
      Row() {
      Button('加1').width('100%').height(50).onClick(()=>{
        this.showNumber1= this.showNumber1+1
      })
      }
      .width('100%')
      Row(){
        My({showNumber1:$showNumber1})
      }.width('100%')
    }
    .height('100%')
    .width('100%')

  }
}

子组件

@Component
export default struct My {
  @Link showNumber1:number
  build() {
    Column() {
      Row() {
        Text('@Link装饰器：')
        TextInput({text:JSON.stringify(this.showNumber1)})
          .width('100%')
          .type(InputType.Number)
          .height(50)
          .onChange((value)=>{
            if(value){
              this.showNumber1=parseInt(value)
            }else  {
              this.showNumber1=0
            }
          })
      }
      .width('50%')
    }
  }
}

4.@Provide/@Consume：配套使用，可以跨组件传值并且在调用组件时不需要传递参数，能直接获取，ui更新 (不需要再组件调用中传值)

父组件

import  My from '../view/My'//引入子组件
@Entry
@Component
struct Index {
  @Provide showNumber: number = 0
  build() {
    Column() {
      Row() {
        Text('showNumber：'+this.showNumber)
          .fontSize(40)
      }
      .width('100%')
      Row() {
      Button('加1').width('100%').height(50).onClick(()=>{
        this.showNumber= this.showNumber+1
      })
      }
      .width('100%')
      Row(){
        My()
      }.width('100%')
    }
    .height('100%')
    .width('100%')

  }
}

子组件

@Component
export default struct My {
@Consume showNumber:number
  build() {
    Column() {
      Row() {
        Text('@Provide装饰器：')
        TextInput({text:JSON.stringify(this.showNumber)})
          .width('100%')
          .type(InputType.Number)
          .height(50)
          .onChange((value)=>{
            if(value){
              this.showNumber=parseInt(value)
            }else  {
              this.showNumber=0
            }
          })
      }
      .width('50%')
    }
  }
}

现阶段属于鸿蒙学习阶段 后续会持续更新 希望大家能给我留下宝贵的意见。我是盒饭 努力搬砖的码农