Harmony OS 父子组件传参

Harmony OS 父子组件传参案例

一、@Prop：从父组件单向同步状态

类似于vue的prop传参，只能父组件传参给子组件

当点击父组件的按钮时，改变message值，参数跟着更新。并且子组件也跟着更新（前提是要子组件加上@prop装饰器并且参数名称一致）。

当点击子组件按钮想要改变message时，父组件的message改变不了，只能改变子组件的参数

父组件代码：

import propTest from "../view/propTest"
@Entry
@Component
struct UseProp {
  @State message: string = '父组件prop'
   build() {

    Column() {
      Text(this.message)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
      propTest({
        message:this.message
      })
      Button('父组件按钮--变').onClick((event: ClickEvent) => {
          this.message="父组件事件触发-变"
      })
    }
    .width('100%')
 
  }
 
}

子组件代码：

@Component
export default struct propTest {
  @Prop message: string ;
  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Green)

      Button('子组件按钮').onClick((event: ClickEvent) => {
        this.message="子组件变化"
      })
        .backgroundColor(Color.Green)
    }
    .width('100%')
  }
   
}

图1.运行时效果图                  图2.点击父组件按钮时                    图3.点击子组件按钮时

二、与父组件双向同步状态：@Link

若是父子组件状态需要相互绑定进行双向同步时，可以使用@Link装饰器。父组件中用于初始化子组件@Link变量的必须是在父组件中定义的状态变量。

当父组件点击按钮时 父子组件的参数同时会+2

当子组件点击按钮时 父子组件的参数同时会-1

这样就实现了数据双向同步（注意传参$clickIndex加$。完成在父子组件中定义状态后，最关键的就是要建立父子组件的双向关联关系。在父组件中使用子组件时，将父组件的clickIndex传递给子组件的clickIndex。其中父组件的clickIndex加上$表示传递的是引用）

import propTest from "../view/propTest"
@Entry
@Component
struct UseProp {
  @State message: string = '父组件prop'
  @State clickIndex: number = 0
  build() {

    Column() {
      Text('clickIndex:'+this.clickIndex)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Brown)
      Button('爸爸+2').onClick((event: ClickEvent) => {
          this.clickIndex+=2
      })
        .backgroundColor(Color.Brown)
      propTest({
        message:this.message,
        clickIndex:$clickIndex
      })
    }
    .width('100%')
  }
}

子组件

@Component
export default struct propTest {
  @Prop message: string ;
  @Link clickIndex:number;
  build() {

    Column() {
      Text('clickIndex:'+this.clickIndex)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Green)
      Button('儿子-1').onClick((event: ClickEvent) => {
        this.clickIndex-=1
      })
        .backgroundColor(Color.Green)
    }
    .width('100%')
  }
   
}

拓展：@watch监听属性

将上述的子组件的clickIndex加上监听器，当clickIndex变化时触发自定义回调函数onClickIndexChanged。函数可以加自己逻辑，比如现在是当clickIndex要小于0时会弹出提示，并且不能为负数。

注意：watch不仅仅是能监听 link修饰符的参数的，@State 、@prop其他的修饰符也能监听

import prompt from '@system.prompt';
@Component
export default struct propTest {
  @Prop message: string ;
  @Link @Watch('onClickIndexChanged') clickIndex:number;
  onClickIndexChanged(){
    if(this.clickIndex<0){
      prompt.showToast({
        message:"数量不能小于0"
      })
      this.clickIndex=0
    }

  }
  build() {

    Column() {
      Text('clickIndex:'+this.clickIndex)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Green)
      Button('儿子-1').onClick((event: ClickEvent) => {
        this.clickIndex-=1
      })
        .backgroundColor(Color.Green)
    }
    .width('100%')
  }
   
}