ArkTS装饰器(三)
1. @State装饰器
@State
装饰的变量,称为状态变量。当状态变量改变时,UI会发生对应的渲染改变。
1.1 @State装饰器特点
@State
装饰的变量,是私有的,只能从组件内部访问。- 在声明时必须指定类型和本地初始化。
1.2 @State装饰器使用示例
@Entry
@Component
struct MyComponent {
// 定义一个状态变量
@State count: number = 0;
build() {
Column() {
// Text组件显示count的值
Text(`count=${this.count}`)
// Button是系统组件,添加一个点击事件,点击一次就给count + 1
Button("点击+1")
.onClick(() => {
this.count++
})
}
}
}
1.3 @State变量的传递规则
父组件中哪些变量可以用来初始化子组件中的@State
变量?
@State
变量可以用来初始化子组件中的哪些变量?
2. @Prop装饰器
@Prop
装饰的变量可以和父组件建立单向的同步关系。
- 当父组件中的数据源更改时,与之相关的
@Prop
装饰的变量都会自动更新。 @Prop
变量允许在本地修改,但修改后的变化不会同步回父组件。
2.1 @Prop装饰器特点
- @Prop装饰器不能在@Entry装饰的自定义组件中使用。
- 在声明时必须指定类型,但可以不进行本地初始化。
2.2 @Prop装饰器使用示例
@Entry
@Component
struct Parent {
// 定义一个状态变量
@State count: number = 0;
build() {
Column() {
// 使用自定义Child组件,并用Parent中count初始化Child中的count
// 当Parent中count改变时,Child中的count也会同步修改
Child({count: this.count})
Text(`Parent组件中count=${this.count}`)
// Button是系统组件,添加一个点击事件,点击一次就给count + 1
Button("点击+1")
.onClick(() => {
this.count++
})
}
}
}
@Component
struct Child {
// 定义一个@prop变量
@Prop count: number
build() {
Text(`Child组件中count=${this.count}`)
}
}
2.3 @Prop变量的传递规则
父组件中哪些变量可以用来初始化子组件中的@Prop
变量?
@Prop
变量可以用来初始化子组件中的哪些变量?
3. @Link装饰器
@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
- 当父组件中的数据源更改时,与之相关的
@Link
装饰的变量都会自动更新。 @Link
变量更改时,变化也会同步回父组件。
3.1 @Link装饰器特点
- @Link装饰器不能在@Entry装饰的自定义组件中使用。
- 在声明时必须指定类型,不能进行本地初始化,并必须父组件初始化。
- 父组件初始化时,必须用
$变量名
格式。
3.2 @Link装饰器使用示例
@Entry
@Component
struct Parent {
// 定义一个状态变量
@State count: number = 0;
build() {
Column() {
// 使用自定义Child组件,并用Parent中的count初始化Child中的count
// 给@Link变量初始化,必须使用$
// 当Parent中的count改变时,Child中的count也会同步改变
Child({count: $count})
Text(`Parent组件中count=${this.count}`)
// Button是系统组件,添加一个点击事件,点击一次就给count + 1
Button("Parent组件中的点击+1")
.onClick(() => {
this.count++
})
}
}
}
@Component
struct Child {
// 定义一个@Link变量
// 当Child中的count改变,Parent中的count也会同步改变
@Link count: number
build() {
Column() {
Text(`Child组件中count=${this.count}`)
Button("Child组件中的点击+1")
.onClick(() => {
this.count++
})
}
}
}
3.3 @Link变量的传递规则
父组件中哪些变量可以用来初始化子组件中的@Link
变量?
@Link
变量可以用来初始化子组件中的哪些变量?