本篇内容 ArkTS的组件变量的状态管理学习
一、知识储备
- @State
① 最常用的组件内部访问的变量装饰器 声明时必须实例化
- @Prop
① 与父类组件建立单向同步关系 声明时不用实例化，配合@State使用
- @Link
① 与父类组件建立双向同步关系 声明时不用实例化，配合@State使用
② 作为参数传递里直接使用$
- @Consume @Provide
① @Consume定义在子组件中进行使用， 不用实例化
② @Provide定义父组件中，需要实例化
③ 可以当前页面内任意调用，不需传递
- @ObjectLink @Observed
① @Observed定义在class前，使用时，需要new对象
② @ObjectLink定义子组件中，不用实例化
二、效果一览
三、源码及分析讲解
@Component
@Entry
struct DecoratePage {
@State school: string = '希望小学'
@State clazz: string = '一年级'
@State name: string = '王二小'
@Provide sex: string = '男'
@State child: Children = new Children(6)
build() {
Row() {
Column() {
Student({
school: `${this.school}`,
clazz: `${this.clazz}`,
child: this.child,
name: $name
})
Button('上初中了')
.onClick(() => {
this.school = '春天中学'
})
Button('长大一岁')
.onClick(() => {
this.child.age += 1
})
Button('改名字了')
.onClick(() => {
this.name = '王二中'
})
Button('改性别了')
.onClick(() => {
this.sex = '女'
})
Button('年级变了')
.onClick(() => {
this.clazz = '三年级'
})
Text(
`父：${this.name}是${this.school}的${this.clazz}的学生，性别(${this.sex})，今年${this.child.age}岁了`
)
}
}
}
}
@Component
struct Student {
@State school: string = '希望小学' // 组件内部访问的变量装饰器 声明时必须实例化
@Prop clazz: string // 与父类组件建立单向同步关系 声明时不用实例化
@Link name: string // 与父类组件建立双向同步关系 声明时不用实例化
@Consume sex: string // 先定义消费变量，直接使用 声明时不用实例化
@ObjectLink child: Children; // 不能在entry装饰的自定义组件中使用
build() {
Text(`子：${this.name}是${this.school}的${this.clazz}的学生，性别(${this.sex})，今年${this.child.age}岁了`)
.onClick(() => {
this.clazz = '二年级'
this.school = '希望小学'
this.name = '王二小'
this.sex = '未知'
this.child.age = 5
})
}
}
@Observed
class Person {
public age: number
constructor(age: number) {
this.age = age;
}
}
@Observed // 配合ObjectLink装饰器使用
class Children extends Person {
public age: number;
constructor(age: number) {
super(age)
this.age = age;
}
}
