@State:
1.@State装饰的变量拥有其所属组件的状态,可以作为其子组件单向和双向同步的数据源. 当其数值改变时,会引起相关组件的渲染刷新.
2.其声明的变量必须初始化值.
@Prop:
1.@Prop装饰的变量可以和父组件建立单向同步关系.
2.@Prop装饰的变量是可变的,但修改不会同步回父组件。.
3.其声明的变量不允许初始化值.
@Link:
1.@Link装饰的变量和父组件构建双向同步关系的状态变量,父组件会接受来自@Link装饰的变量的修改的同步,父组件的更新也会同步给@Link装饰的变量
@Entry
@Component
struct StateManage {
// @State 声明的变量必须初始化值
@State name: string = '小明'
@State age: number = 11
@State msg: string = '我是初始化数据'
@State clickContent: string = '点我!点我!!!'
build() {
Row() {
Column() {
Text(this.name+'今年'+this.age+'岁')
.StateManage_textSty(Color.Yellow)
Text(this.msg)
.StateManage_textSty(Color.Pink)
Button(this.clickContent)
.StateManage_btnStyCli(()=>{
this.msg = this.age === 18 ? this.name + '成年啦' : this.name + '还没成年呢'
this.age = this.age === 18 ? 11 : 18
})
Divider()
StateManagePropItem({content_Prop:this.msg}) //调用的时候必须初始化参数
Divider()
// 如果是@State <----> @Link 参数传递时,使用$变量名进行传值
StateManageLinkItem({content_Link:$msg})
}
.width('100%')
}
.height('100%')
}
}
@Component
struct StateManagePropItem{
//@Prop 装饰的状态数据,方便父子组件之间进行数据传递和同步
//其声明的变量不允许初始化值
//单向传递 @State --> @Prop
@Prop content_Prop: string
build(){
Column(){
Text('Prop:'+this.content_Prop)
.StateManage_textSty(Color.Red)
Button('修改Prop数据')
.StateManage_btnStyCli(()=>{
this.content_Prop = "Prop数据"
})
}
}
}
@Component
struct StateManageLinkItem{
@Link content_Link:string
build(){
Column(){
Text('Link:'+this.content_Link).StateManage_textSty()
Button('修改Link数据').StateManage_btnStyCli(()=>{
this.content_Link = 'Link数据'
})
}
}
}
@Extend(Text) function StateManage_textSty(color?:Color){
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(color)
}
@Extend(Button) function StateManage_btnStyCli(click:()=>void) {
.fontSize(30)
.onClick(() => {
click()
})
}
后续还有补充