鸿蒙开发（10）状态管理 @Link装饰器：父子双向同步

最新推荐文章于 2025-08-06 14:09:15 发布

原创

最新推荐文章于 2025-08-06 14:09:15 发布 · 1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

@Link装饰器：父子双向同步
子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

概述

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

限制条件

@Link装饰器不能在@Entry装饰的自定义组件中使用。

装饰器使用规则说明

在这里插入图片描述

变量的传递/访问规则说明

在这里插入图片描述
图1 初始化规则图示

观察变化和行为表现

观察变化

当装饰的数据类型为boolean、string、number类型时，可以同步观察到数值的变化，示例请参考简单类型和类对象类型的@Link。
当装饰的数据类型为class或者Object时，可以观察到赋值和属性赋值的变化，即Object.keys(observedObject)返回的所有属性，示例请参考简单类型和类对象类型的@Link。
当装饰的对象是array时，可以观察到数组添加、删除、更新数组单元的变化，示例请参考数组类型的@Link。
当装饰的对象是Date时，可以观察到Date整体的赋值，同时可通过调用Date的接口setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds 更新Date的属性。

@Component
struct DateComponent {
   
   
  @Link selectedDate: Date;

  build() {
   
   
    Column() {
   
   
      Button(`child increase the year by 1`).onClick(() => {
   
   
        this.selectedDate.setFullYear(this.selectedDate.getFullYear() + 1)
      })
      Button('child update the new date')
        .margin(10)
        .onClick(() => {
   
   
          this.selectedDate = new Date('2023-09-09')
        })
      DatePicker({
   
   
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.selectedDate
      })
    }

  }
}

@Entry
@Component
struct ParentComponent {
   
   
  @State parentSelectedDate: Date = new Date('2021-08-08');

  build() {
   
   
    Column() {
   
   
      Button('parent increase the month by 1')
        .margin(10)
        .onClick(() => {
   
   
          this.parentSelectedDate.setMonth(this.parentSelectedDate.getMonth() + 1)
        })
      Button('parent update the new date')
        .margin(10)
        .onClick(() => {
   
   
          this.parentSelectedDate = new Date('2023-07-07')
        })
      DatePicker({
   
   
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.parentSelectedDate
      })

      DateComponent({
   
    selectedDate:this.parentSelectedDate })
    }
  }
}

当装饰的变量是Map时，可以观察到Map整体的赋值，同时可通过调用Map的接口set, clear, delete 更新Map的值。详见装饰Map类型变量。
当装饰的变量是Set时，可以观察到Set整体的赋值，同时可通过调用Set的接口add, clear, delete 更新Set的值。详见装饰Set类型变量。

框架行为

@Link装饰的变量和其所属的自定义组件共享生命周期。

为了了解@Link变量初始化和更新机制，有必要先了解父组件和拥有@Link变量的子组件的关系，初始渲染和双向更新的流程（以父组件为@State为例）。

初始渲染：执行父组件的build()函数后将创建子组件的新实例。初始化过程如下：
1. 必须指定父组件中的@State变量，用于初始化子组件的@Link变量。子组件的@Link变量值与其父组件的数据源变量保持同步（双向数据同步）。
2. 父组件的@State状态变量包装类通过构造函数传给子组件，子组件的@Link包装类拿到父组件的@State的状态变量后，将当前@Link包装类this指针注册给父组件的@State变量。
@Link的数据源的更新：即父组件中状态变量更新，引起相关子组件的@Link的更新。处理步骤：
1. 通过初始渲染的步骤可知，子组件@Link包装类把当前this指针注册给父组件。父组件.@State变量变更后，会遍历更新所有依赖它的系统组件（elementid）和状态变量（比如@Link包装类）。
2. 通知@Link包装类更新后，子组件中所有依赖@Link状态变量的系统组件（elementId）都会被通知更新。以此实现父组件对子组件的状态数据同步。
@Link的更新：当子组件中@Link更新后，处理步骤如下（以父组件为@State为例）：
1. @Link更新后，调用父组件的@State包装类的set方法，将更新后的数值同步回父组件。
2. 子组件@Link和父组件@State分别遍历依赖的系统组件，进行对应的UI的更新。以此实现子组件@Link同步回父组件@State。

使用场景

简单类型和类对象类型的@Link

以下示例中，点击父组件ShufflingContainer中的“Parent View: Set yellowButton”和“Parent View: Set GreenButton”，可以从父组件将变化同步给子组件。

点击子组件GreenButton和YellowButton中的Button，子组件会发生相应变化，将变化同步给父组件。因为@Link是双向同步，会将变化同步给@State。
当点击父组件ShufflingContainer中的Button时，@State变化，也会同步给@Link，子组件也会发生对应的刷新。

class GreenButtonState {
   
   
  width: number = 0;

  constructor(width: number) {
   
   
    this.width = width;
  }
}

@Component
struct GreenButton {
   
   
  @Link greenButtonState: GreenButtonState;

  build() {
   
   
    Button('Green Button')
      .width(this.greenButtonState.width)
      .height(40)
      .backgroundColor('#64bb5c')
      .fontColor('#FFFFFF，90%')
      .onClick(() => {
   
   
        if (this.greenButtonState.width < 700<