@State
标记的变量必须初始化,不能为空值。
支持 对象Object、class、string、number、boolean、enum类型以及这些类型的数组。
嵌套对象以及数组中的对象属性,无法触发视图更新。
对象的属性变化了,会更新渲染UI;但是对象的对象的属性发生了变化,不会更新UI。
数组内是对象,对象列表修改了(对象增删、覆盖),会重新渲染UI;
但是对象内的属性变化了,不会重新渲染UI。
@Prop, @Link
@Prop单向同步
- 只支持string,number,boolean,enum等类型。
- 父组件对象类型,子组件是对象属性。
- 不可以是数组、any。
- 不允许子组件初始化。
@Link双向同步
- 父子类型要一致:string,number,boolean,enum,object,class,以及他们的数组。
- 数组中元素增删改,会引起刷新。
- 嵌套类型以及数组中的对象属性,无法触发尝试更新。
- 父组件传递,禁止子组件自己初始化。
@Provider,@Consume
类似State,Link的用法,
跨组件的双向数据同步。
不需要显式的、手动的传递数据。
代码简化,但是效率会损耗。
父组件中:提供
@Provide stat:StateInfo = new StateInfo();
build() {
TaskStatistic()
TaskList()
}
子组件中:直接消费
@Consume stat:StateInfo;
// 取出值
Text(this.stat.finishTask.toString())
@Observed 和 @ObjectLink
@Observed 和 @ObjectLink 装饰器,用于在涉及 嵌套对象 和 数组元素为对象 的场景中进行双向数据同步。
@Observed // 添加装饰器。
class Person {
name: string
age: number
gf: Person
constructor(name: string, age: number, gf?: Person) {
this.name = name
this.age = age
this.gf = gf
}
}
// 抽取:嵌套对象处理。便于添加修饰符 @ObjectLink
@Component
struct Child {
@ObjectLink p:Person; // 给变量添加 @ObjectLink 修饰符。
build() {
Column() {
Text(`s{this.p.gf.name} : $[this.p.gf.age],`)
}
}
}
@Entry
@Component
struct Parent {
@State p: Person = new Person( Jack , 21, new Person( Rose , 18));
@State gfs: Person[] = [
new Person("Lily", 18),
new Person("Lucy", 19),
];
build(){
Column() {
Child({p: this.p.gf} )
.onClick(() => this.p.gf.age++)
Text( ------女朋友列表------- )
ForEach(this.gfs,
p => {
Child({p:p}).onClick(() => p.age++)
})
}
}
}
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...





