子组件中被 @Link 装饰的变量与其父组件中对应的数据源建立双向数据绑定。
说明：
从 API version 9 开始，该装饰器支持在 ArkTS 卡片中使用。
概述
@Link 装饰的变量与其父组件中的数据源共享相同的值。
装饰器使用规则说明
变量的传递/访问规则说明
图 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 的属性。
@Componentstruct 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@Componentstruct 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}) } }}
复制代码
框架行为
@Link 装饰的变量和其所述的自定义组件共享生命周期。
为了了解 @Link 变量初始化和更新机制，有必要先了解父组件和拥有 @Link 变量的子组件的关系，初始渲染和双向更新的流程（以父组件为 @State 为例）。
1. 初始渲染：执行父组件的 build()函数后将创建子组件的新实例。初始化过程如下：
a. 必须指定父组件中的 @State 变量，用于初始化子组件的 @Link 变量。子组件的 @Link 变量值与其父组件的数据源变量保持同步（双向数据同步）。
b. 父组件的 @State 状态变量包装类通过构造函数传给子组件，子组件的 @Link 包装类拿到父组件的 @State 的状态变量后，将当前 @Link 包装类 this 指针注册给父组件的 @State 变量。
2. @Link 的数据源的更新：即父组件中状态变量更新，引起相关子组件的 @Link 的更新。处理步骤：
a. 通过初始渲染的步骤可知，子组件 @Link 包装类把当前 this 指针注册给父组件。父组件 @State 变量变更后，会遍历更新所有依赖它的系统组件（elementid）和状态变量（比如 @Link 包装类）。
b. 通知 @Link 包装类更新后，子组件中所有依赖 @Link 状态变量的系统组件（elementId）都会被通知更新。以此实现父组件对子组件的状态数据同步。
3. @Link 的更新：当子组件中 @Link 更新后，处理步骤如下（以父组件为 @State 为例）：
a. @Link 更新后，调用父组件的 @State 包装类的 set 方法，将更新后的数值同步回父组件。
b. 子组件 @Link 和父组件 @State 分别遍历依赖的系统组件，进行对应的 UI 的更新。以此实现子组件 @Link 同步回父组件 @State。
使用场景
简单类型和类对象类型的 @Link
以下示例中，点击父组件 ShufflingContainer 中的“Parent View: Set yellowButton”和“Parent View: Set GreenButton”，可以从父组件将变化同步给子组件，子组件 GreenButton 和 YellowButton 中 @Link 装饰变量的变化也会同步给其父组件。
class GreenButtonState { width: number = 0; constructor(width: number) { this.width = width; }}@Componentstruct GreenButton { @Link greenButtonState: GreenButtonState; build() { Button('Green Button') .width(this.greenButtonState.width) .height(150.0) .backgroundColor('#00ff00') .onClick(() => { if (this.greenButtonState.width < 700) { // 更新class的属性，变化可以被观察到同步回父组件 this.greenButtonState.width += 125; } else { // 更新class，变化可以被观察到同步回父组件 this.greenButtonState = new GreenButtonState(100); } }) }}@Componentstruct YellowButton { @Link yellowButtonState: number; build() { Button('Yellow Button') .width(this.yellowButtonState) .height(150.0) .backgroundColor('#ffff00') .onClick(() => { // 子组件的简单类型可以同步回父组件 this.yellowButtonState += 50.0; }) }}@Entry@Componentstruct ShufflingContainer { @State greenButtonState: GreenButtonState = new GreenButtonState(300); @State yellowButtonProp: number = 100; build() { Column() { // 简单类型从父组件@State向子组件@Link数据同步 Button('Parent View: Set yellowButton') .onClick(() => { this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 100 : 100; }) // class类型从父组件@State向子组件@Link数据同步 Button('Parent View: Set GreenButton') .onClick(() => { this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 100 : 100; }) // class类型初始化@Link GreenButton({ greenButtonState: $greenButtonState }) // 简单类型初始化@Link YellowButton({ yellowButtonState: $yellowButtonProp }) } }}
复制代码
数组类型的 @Link
@Componentstruct Child { @Link items: number[];
build() { Column() { Button(`Button1: push`).onClick(() => { this.items.push(this.items.length + 1); }) Button(`Button2: replace whole item`).onClick(() => { this.items = [100, 200, 300]; }) } }}
@Entry@Componentstruct Parent { @State arr: number[] = [1, 2, 3];
build() { Column() { Child({ items: $arr }) ForEach(this.arr, (item: void) => { Text(`${item}`) }, (item: ForEachInterface) => item.toString() ) } }}
复制代码
上文所述，ArkUI 框架可以观察到数组元素的添加，删除和替换。在该示例中 @State 和 @Link 的类型是相同的 number[]，不允许将 @Link 定义成 number 类型（@Link item : number），并在父组件中用 @State 数组中每个数据项创建子组件。如果要使用这个场景，可以参考@Prop和 @Observed。
评论