-
@State装饰的属性必须设置默认值 -
@State装饰的属性 可以作为子组件的 数据来源, 当其数值改变时，会引起相关组件的渲染刷新
例如
@Entry
@Component
struct PropAndLinkPage {
//这里必须设置默认值
@State message: string = 'Hello World';
build() {
Column(){
Text(this.message)
LinkCompoent({mes: this.message})
Button('父组件点我').onClick( e => {
this.message = '在父组件中修改message值为 999'
})
}
}
}
@Component
struct PropCompoent {
@Prop mes: string //用Prop修饰的成员属性, 接收父组件的传递的 state修饰的参数时, 会自动刷新UI,
// 但是在子组件内修改成员属性的值, 父组件对应的成员变量的值不会改变并刷新UI
build() {
Column() {
Text(this.mes)
Button('子组件点我').onClick( e => {
this.mes = '在子组件中修改mes的值 7777'
})
}
}
}
@Component
struct LinkCompoent {
//这里不能设置默认值, 会报错, 如果这里用State修饰, 则不能够进行和父组件的双向同步
@Link mes: string //用Link修饰的成员属性, 接收父组件的传递的 state修饰的参数时, 会自动刷新UI,且在子组件中修改属性值, 会同步到父组件中,且刷新父组件中的UI,
//@link 类似于传递了指针给子组件
build() {
Column() {
Text(this.mes)
Button('子组件点我').onClick( e => {
this.mes = '在子组件中修改mes的值 888'
})
}
}
}
-
@Link装饰的属性不能设置默认值, 只能通过组件初始化时传值 -
@Link装饰的属性 变量可以和父组件建立双向同步关系, 当在子组件改变@Link装饰的属性, 会同步到父组件中传入的@State修饰的属性, 同样在父组件中修改@State, 修饰的属性值, 也会同步到子组件中@Link装饰的属性
-
@Prop装饰的属性 可以设置默认值, 也可以不设置 -
@Prop装饰的属性 变量可以和父组件建立单向同步关系, 当在子组件改变@Prop装饰的属性,不会同步到父组件中传入的@State修饰的属性,但是在父组件中修改@State, 修饰的属性值, 会同步到子组件中@Prop装饰的属性
