唐山网站主页制作,台州做网站需要多少钱,企业vi设计欣赏,福州便民生活网Link装饰器#xff1a;父子双向同步
子组件中被Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
说明
从API version 9开始#xff0c;该装饰器支持在ArkTS卡片中使用。
概述
Link装饰的变量与其父组件中的数据源共享相同的值。
装饰器使用规则说明
Link变…Link装饰器父子双向同步
子组件中被Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
说明
从API version 9开始该装饰器支持在ArkTS卡片中使用。
概述
Link装饰的变量与其父组件中的数据源共享相同的值。
装饰器使用规则说明
Link变量装饰器说明装饰器参数无同步类型双向同步。父组件中State, StorageLink和Link 和子组件Link可以建立双向数据同步反之亦然。允许装饰的变量类型Object、class、string、number、boolean、enum类型以及这些类型的数组。嵌套类型的场景请参考观察变化。类型必须被指定且和双向绑定状态变量的类型相同。不支持any不支持简单类型和复杂类型的联合类型不允许使用undefined和null。说明不支持Length、ResourceStr、ResourceColor类型Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。被装饰变量的初始值无禁止本地初始化。
变量的传递/访问规则说明
传递/访问说明从父组件初始化和更新必选。与父组件State, StorageLink和Link 建立双向绑定。允许父组件中State、Link、Prop、Provide、Consume、ObjectLink、StorageLink、StorageProp、LocalStorageLink和LocalStorageProp装饰变量初始化子组件Link。从API version 9开始Link子组件从父组件初始化State的语法为Comp({ aLink: this.aState })。同样Comp({aLink: $aState})也支持。用于初始化子组件允许可用于初始化常规变量、State、Link、Prop、Provide。是否支持组件外访问私有只能在所属组件内访问。
图1 初始化规则图示 观察变化和行为表现
观察变化
当装饰的数据类型为boolean、string、number类型时可以同步观察到数值的变化示例请参考简单类型和类对象类型的Link。当装饰的数据类型为class或者Object时可以观察到赋值和属性赋值的变化即Object.keys(observedObject)返回的所有属性示例请参考简单类型和类对象类型的Link。当装饰的对象是array时可以观察到数组添加、删除、更新数组单元的变化示例请参考数组类型的Link。
框架行为
Link装饰的变量和其所述的自定义组件共享生命周期。
为了了解Link变量初始化和更新机制有必要先了解父组件和拥有Link变量的子组件的关系初始渲染和双向更新的流程以父组件为State为例。
初始渲染执行父组件的build()函数后将创建子组件的新实例。初始化过程如下 必须指定父组件中的State变量用于初始化子组件的Link变量。子组件的Link变量值与其父组件的数据源变量保持同步双向数据同步。父组件的State状态变量包装类通过构造函数传给子组件子组件的Link包装类拿到父组件的State的状态变量后将当前Link包装类this指针注册给父组件的State变量。 Link的数据源的更新即父组件中状态变量更新引起相关子组件的Link的更新。处理步骤 通过初始渲染的步骤可知子组件Link包装类把当前this指针注册给父组件。父组件State变量变更后会遍历更新所有依赖它的系统组件elementid和状态变量比如Link包装类。通知Link包装类更新后子组件中所有依赖Link状态变量的系统组件elementId都会被通知更新。以此实现父组件对子组件的状态数据同步。 Link的更新当子组件中Link更新后处理步骤如下以父组件为State为例 Link更新后调用父组件的State包装类的set方法将更新后的数值同步回父组件。子组件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;}
}
Component
struct 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);}})}
}
Component
struct YellowButton {Link yellowButtonState: number;build() {Button(Yellow Button).width(this.yellowButtonState).height(150.0).backgroundColor(#ffff00).onClick(() {// 子组件的简单类型可以同步回父组件this.yellowButtonState 50.0;})}
}
Entry
Component
struct 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类型初始化LinkGreenButton({ greenButtonState: $greenButtonState })// 简单类型初始化LinkYellowButton({ yellowButtonState: $yellowButtonProp })}}
}数组类型的Link
Component
struct 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
Component
struct Parent {State arr: number[] [1, 2, 3];build() {Column() {Child({ items: $arr })ForEach(this.arr,item {Text(${item})},item item.toString())}}
}上文所述ArkUI框架可以观察到数组元素的添加删除和替换。在该示例中State和Link的类型是相同的number[]不允许将Link定义成number类型Link item : number并在父组件中用State数组中每个数据项创建子组件。如果要使用这个场景可以参考Prop和Observed。
