HarmonyOS鸿蒙Next中如何实现@State与@Link父子组件双向同步？

HarmonyOS鸿蒙Next中如何实现@State与@Link父子组件双向同步？ 如何在父组件和子组件之间实现数据的双向绑定？

3 回复

父组件使用@State，子组件使用@Link，通过$符号传递引用。

示例代码：

/**
 * @author J.query
 * @date 2025/12/22 22:07
 * @email j-query@foxmail.com
 * Description:
 */

@Component
struct CounterChild {
  // 使用 @Link 接收父组件的引用
  @Link counterValue: number;

  build() {
    Row() {
      Button('-').onClick(() => {
        if (this.counterValue > 0) {
          this.counterValue--;
        }
      })
      Text(`${this.counterValue}`).margin({ left: 20, right: 20 })
      Button('+').onClick(() => {
        this.counterValue++;
      })
    }.margin(10)
  }
}

@Entry
@Component
struct ParentPage {
  // 父组件状态
  @State count: number = 0;

  build() {
    Column() {
      // 这里的 $count 传递的是引用，实现双向绑定
      CounterChild({ counterValue: $count })
      Text(`父组件同步值: ${this.count}`)
        .fontSize(20)
        .margin(20)
    }.width('100%')
  }
}

效果：点击子组件的按钮，父组件的文本会同步更新，反之亦然。

cke_631.png

更多关于HarmonyOS鸿蒙Next中如何实现@State与@Link父子组件双向同步？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用@State与@Link装饰器实现父子组件双向数据同步。

在父组件中，使用@State装饰一个状态变量。当需要将该状态同步给子组件时，将父组件的状态变量通过组件构造参数传递给子组件，子组件使用@Link装饰器接收该变量。

这样，父组件中@State变量的变化会自动同步到子组件的@Link变量，反之，子组件内对@Link变量的修改也会自动更新父组件的@State变量，从而实现双向绑定。

在HarmonyOS Next中，[@State](/user/State)和[@Link](/user/Link)装饰器是ArkUI框架实现父子组件数据双向同步的核心机制。其工作原理和实现方式如下：

1. 核心机制

  • @State：用于组件内部的状态管理，当数据变化时，会触发所在组件的UI更新。
  • @Link：用于建立父子组件间的双向数据绑定，子组件通过[@Link](/user/Link)装饰的变量与父组件的[@State](/user/State)变量建立引用关系。

2. 实现步骤

父组件（ParentComponent）：

@Entry
@Component
struct ParentComponent {
  [@State](/user/State) parentValue: number = 0 // 父组件的状态变量

  build() {
    Column() {
      Text(`父组件值: ${this.parentValue}`)
        .fontSize(30)
        .margin(20)
      
      Button('父组件+1')
        .onClick(() => {
          this.parentValue++ // 修改父组件状态
        })
        .margin(10)

      // 将父组件的[@State](/user/State)变量传递给子组件
      ChildComponent({ childLink: $parentValue })
    }
  }
}

子组件（ChildComponent）：

@Component
struct ChildComponent {
  [@Link](/user/Link) childLink: number // 使用[@Link](/user/Link)接收父组件的引用

  build() {
    Column() {
      Text(`子组件值: ${this.childLink}`)
        .fontSize(20)
        .margin(15)
      
      Button('子组件+1')
        .onClick(() => {
          this.childLink++ // 修改会同步到父组件
        })
        .margin(10)
    }
  }
}

3. 关键要点

  • 传递语法：父组件使用$符号传递[@State](/user/State)变量的引用（$parentValue）
  • 双向同步：任意一端修改数据，另一端都会自动同步更新
  • 类型一致：[@Link](/user/Link)变量的类型必须与父组件[@State](/user/State)变量类型完全匹配
  • 初始化：[@Link](/user/Link)变量不能在组件内初始化，必须从父组件传入

4. 注意事项

  • 避免循环更新，确保数据修改逻辑清晰
  • 复杂对象建议使用@Observed和@ObjectLink进行深度观察
  • 单向数据流场景可使用@Prop装饰器

这种设计模式保持了数据源的唯一性，同时提供了灵活的双向通信能力，符合ArkUI的响应式编程范式。

回到顶部