渐进式编程课
鸿蒙 目录
第 4 课2026.07.07

适用场景：子组件中的按钮、开关或输入框需要修改父组件状态

第 4 课：@Link 双向状态同步

  • 日期：2026-07-07
  • 知识点：父组件 @State 与子组件 @Link 的双向同步
  • 适用场景：子组件中的按钮、开关或输入框需要修改父组件状态

承接上一课的 @Prop：@Prop 适合父组件把数据传给子组件；这一课学习子组件需要修改父组件状态的场景。

1. @Link 用于父子组件双向同步

父组件用 @State 持有真实数据，子组件用 @Link 接收绑定。子组件修改 @Link 后，父组件的 @State 也会同步变化。

ts
@Component
struct CounterControl {
  @Link count: number;

  build() {
    Button('子组件加 1')
      .onClick(() => {
        this.count += 1;
      })
  }
}

@Entry
@Component
struct CounterPage {
  @State count: number = 0;

  build() {
    Column({ space: 12 }) {
      Text(`父组件计数：${this.count}`)
        .fontSize(22)

      CounterControl({ count: $count })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

关键链路：

text
父组件 @State count
-> 通过 $count 传给子组件
-> 子组件 @Link count 修改
-> 父组件 count 同步变化
-> UI 自动刷新

使用原则：只展示数据时使用 @Prop；子组件需要修改父组件状态时再使用 @Link。不要为了省事把所有传参都写成 @Link，否则数据流会变难追踪。

3～5 分钟练习

在 CounterControl 里再加一个“清零”按钮，把 this.count = 0，观察父组件里的 Text 是否同步变成 0。

参考答案

ts
Button('清零')
  .onClick(() => {
    this.count = 0;
  })

与上一课的联系

@Prop 是父到子的单向展示；@Link 在确有需要时让子组件反向修改父组件的真实状态。