鸿蒙/DevEco Studio的ArkUI-父子通信组件的基本使用（1）单向传递

本文链接：https://blog.csdn.net/weixin_69253778/article/details/138028546

本文讲解了React中如何通过@Prop实现父子组件的数据单向传递，以及@Link的共享变量特性，涉及对象、数组和嵌套结构的处理

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当父子组件之间需要数据同步时，可以使用@Prop和@Link装饰器

@Prop

单向同步

@Prop只支持: string、number.boolean、enum类型

父组件对象类型，子组件是对象属性

不可以是数组、any

//子组件不允许初始化

实现

父组件

 @State stat: number = 10
TaskStatistics({ sum: this.sum })//传值方式

子组件

  @Prop stat: number

示例

@Entry
@Component
struct PropPage {
  @State sum:number=10
  build() {
    Column({space: 10}){
      TaskStatistics({ sum: this.sum })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}


@Component
struct TaskStatistics {
  @Prop sum:number
  build() {
    Row(){
      Text(this.sum.toString())
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
  }
}

@Link

父组件传递，子组件禁止初始化

@Link装饰的变量与其父组件中的数据源共享相同的值。

父子类型一致:string、number、Boolean，enum，object、class，以及他们的数组

数组中元素增、删、替换会引起刷新

嵌套类型以及数组中的对象属性无法触发视图更新

父组件

  @State arr: number[] = [1, 2, 3];
 Child({ items: $arr })//向子组件传值书写方法 $

子组件

@Link items: number[];

示例

@Entry
@Component
struct Parent {
  @State arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Child({ items: $arr })
        .margin(12)
      ForEach(this.arr,
        (item: number) => {
          Button(`${item}`)
            .margin(12)
            .width(312)
            .height(40)
            .backgroundColor('#11a2a2a2')
            .fontColor('#e6000000')
        },
        (item: ForEachInterface) => item.toString()
      )
    }
  }
}



@Component
struct Child {
  @Link items: number[];

  build() {
    Column() {
      Button(`Button1: push`)
        .margin(12)
        .width(312)
        .height(40)
        .fontColor('#FFFFFF，90%')
        .onClick(() => {
          this.items.push(this.items.length + 1);
        })
    }
  }
}