• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \@Link：父子双向同步
2
3
4子组件中被\@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
5
6
7> **说明：**
8>
9> 从API version 9开始，该装饰器支持在ArkTS卡片中使用。
10
11
12## 概述
13
14\@Link装饰的变量与其父组件中的数据源共享相同的值。
15
16
17## 装饰器使用规则说明
18
19| \@Link变量装饰器 | 说明                                       |
20| ----------- | ---------------------------------------- |
21| 装饰器参数       | 无                                        |
22| 同步类型        | 双向同步。<br/>父组件中\@State,&nbsp;\@StorageLink和\@Link&nbsp;和子组件\@Link可以建立双向数据同步，反之亦然。 |
23| 允许装饰的变量类型   | Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考[观察变化](#观察变化)。<br/>类型必须被指定，且和双向绑定状态变量的类型相同。<br/>不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。<br/>**说明：**<br/>不支持Length、ResourceStr、ResourceColor类型，Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。 |
24| 被装饰变量的初始值   | 无，禁止本地初始化。                               |
25
26
27## 变量的传递/访问规则说明
28
29| 传递/访问      | 说明                                       |
30| ---------- | ---------------------------------------- |
31| 从父组件初始化和更新 | 必选。与父组件\@State,&nbsp;\@StorageLink和\@Link&nbsp;建立双向绑定。允许父组件中\@State、\@Link、\@Prop、\@Provide、\@Consume、\@ObjectLink、\@StorageLink、\@StorageProp、\@LocalStorageLink和\@LocalStorageProp装饰变量初始化子组件\@Link。<br/>从API&nbsp;version&nbsp;9开始，\@Link子组件从父组件初始化\@State的语法为Comp({&nbsp;aLink:&nbsp;this.aState&nbsp;})。同样Comp({aLink:&nbsp;$aState})也支持。 |
32| 用于初始化子组件   | 允许，可用于初始化常规变量、\@State、\@Link、\@Prop、\@Provide。 |
33| 是否支持组件外访问  | 私有，只能在所属组件内访问。                           |
34
35  **图1** 初始化规则图示  
36
37![zh-cn_image_0000001502092556](figures/zh-cn_image_0000001502092556.png)
38
39
40## 观察变化和行为表现
41
42
43### 观察变化
44
45- 当装饰的数据类型为boolean、string、number类型时，可以同步观察到数值的变化，示例请参考[简单类型和类对象类型的@Link](#简单类型和类对象类型的link)。
46
47- 当装饰的数据类型为class或者Object时，可以观察到赋值和属性赋值的变化，即Object.keys(observedObject)返回的所有属性，示例请参考[简单类型和类对象类型的@Link](#简单类型和类对象类型的link)。
48
49- 当装饰的对象是array时，可以观察到数组添加、删除、更新数组单元的变化，示例请参考[数组类型的@Link](#数组类型的link)。
50
51
52### 框架行为
53
54\@Link装饰的变量和其所述的自定义组件共享生命周期。
55
56为了了解\@Link变量初始化和更新机制，有必要先了解父组件和和拥有\@Link变量的子组件的关系，初始渲染和双向更新的流程（以父组件为\@State为例）。
57
581. 初始渲染：执行父组件的build()函数后将创建子组件的新实例。初始化过程如下：
59   1. 必须指定父组件中的\@State变量，用于初始化子组件的\@Link变量。子组件的\@Link变量值与其父组件的数据源变量保持同步（双向数据同步）。
60   2. 父组件的\@State状态变量包装类通过构造函数传给子组件，子组件的\@Link包装类拿到父组件的\@State的状态变量后，将当前\@Link包装类this指针注册给父组件的\@State变量。
61
622. \@Link的数据源的更新：即父组件中状态变量更新，引起相关子组件的\@Link的更新。处理步骤：
63   1. 通过初始渲染的步骤可知，子组件\@Link包装类把当前this指针注册给父组件。父组件\@State变量变更后，会遍历更新所有依赖它的系统组件（elementid）和状态变量（比如\@Link包装类）。
64   2. 通知\@Link包装类更新后，子组件中所有依赖\@Link状态变量的系统组件（elementId）都会被通知更新。以此实现父组件对子组件的状态数据同步。
65
663. \@Link的更新：当子组件中\@Link更新后，处理步骤如下（以父组件为\@State为例）：
67   1. \@Link更新后，调用父组件的\@State包装类的set方法，将更新后的数值同步回父组件。
68   2. 子组件\@Link和父组件\@State分别遍历依赖的系统组件，进行对应的UI的更新。以此实现子组件\@Link同步回父组件\@State。
69
70
71## 使用场景
72
73
74### 简单类型和类对象类型的\@Link
75
76以下示例中，点击父组件ShufflingContainer中的“Parent View: Set yellowButton”和“Parent View: Set GreenButton”，可以从父组件将变化同步给子组件，子组件GreenButton和YellowButton中\@Link装饰变量的变化也会同步给其父组件。
77
78
79```ts
80class GreenButtonState {
81  width: number = 0;
82  constructor(width: number) {
83    this.width = width;
84  }
85}
86@Component
87struct GreenButton {
88  @Link greenButtonState: GreenButtonState;
89  build() {
90    Button('Green Button')
91      .width(this.greenButtonState.width)
92      .height(150.0)
93      .backgroundColor('#00ff00')
94      .onClick(() => {
95        if (this.greenButtonState.width < 700) {
96          // 更新class的属性，变化可以被观察到同步回父组件
97          this.greenButtonState.width += 125;
98        } else {
99          // 更新class，变化可以被观察到同步回父组件
100          this.greenButtonState = new GreenButtonState(100);
101        }
102      })
103  }
104}
105@Component
106struct YellowButton {
107  @Link yellowButtonState: number;
108  build() {
109    Button('Yellow Button')
110      .width(this.yellowButtonState)
111      .height(150.0)
112      .backgroundColor('#ffff00')
113      .onClick(() => {
114        // 子组件的简单类型可以同步回父组件
115        this.yellowButtonState += 50.0;
116      })
117  }
118}
119@Entry
120@Component
121struct ShufflingContainer {
122  @State greenButtonState: GreenButtonState = new GreenButtonState(300);
123  @State yellowButtonProp: number = 100;
124  build() {
125    Column() {
126      // 简单类型从父组件@State向子组件@Link数据同步
127      Button('Parent View: Set yellowButton')
128        .onClick(() => {
129          this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 100 : 100;
130        })
131      // class类型从父组件@State向子组件@Link数据同步
132      Button('Parent View: Set GreenButton')
133        .onClick(() => {
134          this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 100 : 100;
135        })
136      // class类型初始化@Link
137      GreenButton({ greenButtonState: $greenButtonState })
138      // 简单类型初始化@Link
139      YellowButton({ yellowButtonState: $yellowButtonProp })
140    }
141  }
142}
143```
144
145
146### 数组类型的\@Link
147
148
149```ts
150@Component
151struct Child {
152  @Link items: number[];
153
154  build() {
155    Column() {
156      Button(`Button1: push`).onClick(() => {
157        this.items.push(this.items.length + 1);
158      })
159      Button(`Button2: replace whole item`).onClick(() => {
160        this.items = [100, 200, 300];
161      })
162    }
163  }
164}
165
166@Entry
167@Component
168struct Parent {
169  @State arr: number[] = [1, 2, 3];
170
171  build() {
172    Column() {
173      Child({ items: $arr })
174      ForEach(this.arr,
175        item => {
176          Text(`${item}`)
177        },
178        item => item.toString()
179      )
180    }
181  }
182}
183```
184
185
186上文所述，ArkUI框架可以观察到数组元素的添加，删除和替换。在该示例中\@State和\@Link的类型是相同的number[]，不允许将\@Link定义成number类型（\@Link item : number），并在父组件中用\@State数组中每个数据项创建子组件。如果要使用这个场景，可以参考[\@Prop](arkts-prop.md)和\@Observed。
187