正能量不良网站直接进入免费,深圳网站推广外包,记事本做网站怎么加背景图,网站的运营管理方案经历的越多#xff0c;越喜欢简单的生活#xff0c;干净的东西#xff0c;清楚的感觉#xff0c;有结果的事#xff0c;和说到做到的人。把圈子变小#xff0c;把语放缓#xff0c;把心放宽#xff0c;用心做好手边的事儿#xff0c;该有的总会有的! 目录 一#xff… 经历的越多越喜欢简单的生活干净的东西清楚的感觉有结果的事和说到做到的人。把圈子变小把语放缓把心放宽用心做好手边的事儿该有的总会有的! 目录 一定义 二装饰器说明 三变量的传递/访问规则说明 四使用 1简单对象的使用 2嵌套对象的使用 3数组对象的使用 一定义
之前所讲的装饰器仅能观察到第一层的变化但是在实际应用开发中应用会根据开发需要封装自己的数据模型。对于多层嵌套的情况比如二维数组或者数组项class或者class的属性是class他们的第二层的属性变化是无法观察到的。这就引出了Observed/ObjectLink装饰器。
ObjectLink和Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步
①被Observed装饰的类可以被观察到属性的变化
②子组件中ObjectLink装饰器装饰的状态变量用于接收Observed装饰的类的实例和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被Observed装饰的项或者是class object中的属性这个属性同样也需要被Observed装饰。
③单独使用Observed是没有任何作用的需要搭配ObjectLink或者Prop使用。
限制条件
①使用Observed装饰class会改变class原始的原型链Observed和其他类装饰器装饰同一个class可能会带来问题。
②ObjectLink装饰器不能在Entry装饰的自定义组件中使用。
二装饰器说明
Observed类装饰器说明装饰器参数无类装饰器装饰class。需要放在class的定义前使用new创建类对象。
ObjectLink变量装饰器说明装饰器参数无同步类型不与父组件中的任何类型同步变量。允许装饰的变量类型必须为被Observed装饰的class实例必须指定类型。 不支持简单类型可以使用Prop。 支持继承Date或者Array的class实例 ObjectLink的属性是可以改变的但是变量的分配是不允许的也就是说这个装饰器装饰变量是只读的不能被改变。被装饰变量的初始值不允许。
注意
ObjectLink装饰的变量不能被赋值如果要使用赋值操作请使用Prop。
①Prop装饰的变量和数据源的关系是单向同步Prop装饰的变量在本地拷贝了数据源所以它允许本地更改如果父组件中的数据源有更新Prop装饰的变量本地的修改将被覆盖
②ObjectLink装饰的变量和数据源的关系是双向同步ObjectLink装饰的变量相当于指向数据源的指针。禁止对ObjectLink装饰的变量赋值如果一旦发生ObjectLink装饰的变量的赋值则同步链将被打断。因为ObjectLink修饰的变量通过数据源Object引用来初始化。对于实现双向数据同步的ObjectLink赋值相当于更新父组件中的数组项或者class的属性TypeScript/JavaScript不能实现会发生运行时报错。
三变量的传递/访问规则说明
ObjectLink传递/访问说明从父组件初始化必须指定。 初始化ObjectLink装饰的变量必须同时满足以下场景 - 类型必须是Observed装饰的class。 - 初始化的数值需要是数组项或者class的属性。 - 同步源的class或者数组必须是StateLinkProvideConsume或者ObjectLink装饰的数据。与源对象同步双向。可以初始化子组件允许可用于初始化常规变量、State、Link、Prop、Provide 四使用
注意Observed必须在ets文件中使用在ts文件中不允许使用
1简单对象的使用
用Observed装饰数据类
Observed
export default class YuanZhen {public name: string YuanZhen;public age: number 18;constructor(name: string, age: number) {this.name namethis.age age}
}
子组件
import YuanZhen from ./bean/YuanZhenComponent
export default struct ProvideTest {ObjectLink yuanZhen:YuanZhenbuild() {Row() {Column() {Text(子name: this.yuanZhen.name\nage:this.yuanZhen.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() {this.yuanZhen.name 袁震2this.yuanZhen.age35})}.width(100%)}.height(100%)}}
父组件
import YuanZhen from ./bean/YuanZhen;
import ProvideTest from ./ProvideTest;Entry
Component
struct Index {State yuan:YuanZhennew YuanZhen(袁震,18)build() {Column(){Text(父name: this.yuan.name\nage:this.yuan.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() {this.yuan.name 袁震1this.yuan.age 20})ProvideTest({yuanZhen:this.yuan})}}}
注意这里会有一个报错Assigning the State decorated attribute yuan to the ObjectLink decorated attribute yuanZhen is not allowed. ArkTSCheck 是编译器的问题但是不影响使用
运行效果
点击父点击子
所以 被Observed和ObjectLink修饰的class可以实现父子双向绑定
2嵌套对象的使用
用Observed修饰的数据类
Observed
export default class YuanZhen {public name: string YuanZhen;public age: number 18;constructor(name: string, age: number) {this.name namethis.age age}
}
import YuanZhen from ./YuanZhen;
Observed
export default class Yuan {public number: number 1;public yuanZhen: YuanZhen new YuanZhen(yuanzhen, 18);constructor(number: number, yuanZhen: YuanZhen) {this.number numberthis.yuanZhen yuanZhen}
}
子组件
import YuanZhen from ./bean/YuanZhenComponent
export default struct ProvideTest {ObjectLink yuanZhen:YuanZhenbuild() {Row() {Column() {Text(子name: this.yuanZhen.name\nage:this.yuanZhen.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() {this.yuanZhen.name 袁震2this.yuanZhen.age35})}.width(100%)}.height(100%)}
}
父组件
import Yuan from ./bean/Yuan;
import YuanZhen from ./bean/YuanZhen;
import ProvideTest from ./ProvideTest;Entry
Component
struct Index {State yuan:Yuannew Yuan(1,new YuanZhen(袁震,18))build() {Column(){Text(父name: this.yuan.yuanZhen.name\nage:this.yuan.yuanZhen.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() {this.yuan.yuanZhen.name 袁震1this.yuan.yuanZhen.age 20console.info(yz----namethis.yuan.yuanZhen.name )})ProvideTest({yuanZhen:this.yuan.yuanZhen})}}
}
运行
点击父点击子
点击父组件输出
由此可见当class为嵌套类型时父组件的UI不会改变但是数据会改变子组件的UI和数据都会改变
3数组对象的使用
子组件
import Yuan from ./bean/YuanComponent
export default struct ProvideTest {ObjectLink yuan:Yuanbuild() {Row() {Column() {Text(子name:this.yuan.yuanZhen.name\nage:this.yuan.yuanZhen.age\nnumber:this.yuan.number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() {this.yuan.yuanZhen.name 袁震子组件this.yuan.yuanZhen.age35console.log(yz---name:this.yuan.yuanZhen.name)})}.width(100%)}.height(100%)}
}
父组件
import Yuan from ./bean/Yuan;
import YuanZhen from ./bean/YuanZhen;
import ProvideTest from ./ProvideTest;Entry
Component
struct Index {State yuan:ArrayYuannew ArrayaboutToAppear(){let yuan1:Yuan new Yuan(1,new YuanZhen(袁震1,18))let yuan2:Yuan new Yuan(2,new YuanZhen(袁震2,19))let yuan3:Yuan new Yuan(3,new YuanZhen(袁震3,20))this.yuan.push(yuan1)this.yuan.push(yuan2)this.yuan.push(yuan3)}build() {Column(){Text(父name: this.yuan[0].yuanZhen.name\nage:this.yuan[0].yuanZhen.age\nnumber:this.yuan[0].number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() {this.yuan[0].yuanZhen.name袁震父组件this.yuan[0].number 10this.yuan[0].yuanZhen.age30})ProvideTest({yuan:this.yuan[0]})}}}
运行
点击父点击子
可以看到父组件不会更新本身的UI会更新子组件的UI子组件既不会更新自己的UI也不会更新父组件的UI。
但是可以直接传给子组件简单类这样可以更新子组件
子组件
import YuanZhen from ./bean/YuanZhenComponent
export default struct ProvideTest {ObjectLink yuanZhen:YuanZhenbuild() {Row() {Column() {Text(子name:this.yuanZhen.name\nage:this.yuanZhen.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() {this.yuanZhen.name 袁震子组件this.yuanZhen.age35console.log(yz---name:this.yuanZhen.name)})}.width(100%)}.height(100%)}
}
父组件
import Yuan from ./bean/Yuan;
import YuanZhen from ./bean/YuanZhen;
import ProvideTest from ./ProvideTest;Entry
Component
struct Index {State yuan:ArrayYuannew ArrayaboutToAppear(){let yuan1:Yuan new Yuan(1,new YuanZhen(袁震1,18))let yuan2:Yuan new Yuan(2,new YuanZhen(袁震2,19))let yuan3:Yuan new Yuan(3,new YuanZhen(袁震3,20))this.yuan.push(yuan1)this.yuan.push(yuan2)this.yuan.push(yuan3)}build() {Column(){Text(父name: this.yuan[0].yuanZhen.name\nage:this.yuan[0].yuanZhen.age\nnumber:this.yuan[0].number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() {this.yuan[0].yuanZhen.name袁震父组件this.yuan[0].number 10this.yuan[0].yuanZhen.age30})ProvideTest({yuanZhen:this.yuan[0].yuanZhen})}}}
点击父点击子
父组件的ui不会改变子组件的UI会实时更新
