修饰符除了@State还有@Prop,@Link,@Provide和@Consume,@ObjectLink和@Observed
1.@State
当变量变化会引起ui变化
基本数据类型可以观察到(必须赋值),object和class直接属性没有问题,比如this.num++,但是类嵌套就不行比如两层类嵌套,this.p.num,好像现在可以监听到了,api5就可以监控到。数组类型,里面为类,加一个元素,减一个元素可以监听到,里面属性值变了,不能监听到。
2.@Prop 有点像某个属性关联到儿子的属性
父组件@State,子组件@Prop,父组件调用子组件,传值的话,就要用@Prop。
父亲可以同步到儿子这里来,但是儿子却不能同步到父亲那里,因为它是单向的。@Prop不可以触发同步更新,@Link可以触发。
不支持class,objec,数组 link就变成两个属性都相互关联。
3.@Link,和@Prop差不多,儿子可以同步到父亲那里。
支持class,object,数组
//子组件
Child({ count: $count })
原本@Prop和@Link不一样,现在都一样了,直接用this了
$count可以换成this,现在新版本就统一了
$变成这个变量的引用地址
@Entry
@Component
struct Parent {
@State count: number = 1;
build() {
Column() {
Column({ space: 10 }) {
//父组件标题
Text('父组件').textStyle()
//父组件计数器
Row({ space: 10 }) {
Text('@State').textStyle()
Counter() {
Text(this.count.toString()).textStyle()
}
.onInc(() => this.count++)
.onDec(() => this.count--)
}
//子组件
Child({ count: $count })
}
.containerStyle(Color.White)
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor('#EFEFEF')
.padding(10)
}
}
@Component
struct Child {
@Link count: number;
build() {
Column({ space: 10 }) {
//子组件标题
Text('子组件').textStyle()
//子组件计数器
Row({ space: 10 }) {
Text('@Link').textStyle()
Counter() {
Text(this.count.toString()).textStyle()
}
.onInc(() => this.count++)
.onDec(() => this.count--)
}
}
.containerStyle('#CCE3CB')
}
}
@Extend(Text) function textStyle() {
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
@Extend(Column) function containerStyle(color: ResourceColor) {
.width('100%')
.backgroundColor(color)
.padding(10)
.borderRadius(20)
}
4.@provide和@consume 就是孙子和祖先的关系
就是跨组件通知信息,跨了两代 单纯看名字,把@provide暴露出去,孙子些要用就@consume,就可以了。
@Entry
@Component
struct GrandParent {
@Provide count: number = 1;
build() {
Column() {
Column({ space: 10 }) {
//祖先组件标题
Text('祖先组件').textStyle()
//祖先组件计数器
Row({ space: 10 }) {
Text('@Provide').textStyle()
Counter() {
Text(this.count.toString()).textStyle()
}
.onInc(() => this.count++)
.onDec(() => this.count--)
}
//父组件
Parent()
}
.containerStyle(Color.White)
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor('#EFEFEF')
.padding(10)
}
}
@Component
struct Parent {
build() {
Column({ space: 10 }) {
//父组件标题
Text('父组件').textStyle()
//子组件
Child()
}
.containerStyle('#CCE3CB')
}
}
@Component
export struct Child {
@Consume count: number;
build() {
Column({ space: 10 }) {
//子组件标题
Text('子组件').textStyle()
//子组件计数器
Row({ space: 10 }) {
Text('@Consume').textStyle()
Counter() {
Text(this.count.toString()).textStyle()
}
.onInc(() => this.count++)
.onDec(() => this.count--)
}
}
.containerStyle('#f6c867')
}
}
@Extend(Text) function textStyle() {
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
@Extend(Column) function containerStyle(color: ResourceColor) {
.width('100%')
.backgroundColor(color)
.padding(10)
.borderRadius(20)
}
@ObjectLink和Obeserved
观察第二层
在@Prop,@Link,@Provide与@Consume这几个装饰器仅能观察到第一层的变化,在实际应用开发中,应用会根据开发需要,封装自己的数据模型。对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器的作用。
原文链接:https://blog.csdn.net/weixin_69253778/article/details/138847135