State 管理狀態(tài)
截屏2024-05-11 14.22.54.png
- 支持
stringnumber類型的狀態(tài)管理
@Entry
@Component
struct StatePage {
@State name: string = '馬云'
@State age: number = 55
build() {
Column({space: 20}){
Text(`姓名: ${this.name} _年齡: ${this.age}`)
.fontSize(30)
.onClick((e)=> {
this.age++
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
2 支持class 類型的狀態(tài)管理, class的實(shí)例對象的屬性發(fā)生變化, 頁面也會發(fā)生變化
class Person {
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
}
@Entry
@Component
struct StatePage2 {
@State p: Person = new Person('馬云', 77)
build() {
Column({space: 20}){
Text(`姓名: ${this.p.name} _年齡: ${this.p.age}`)
.fontSize(30)
.onClick((e)=> {
this.p.age++
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
注意: 對class嵌套的class實(shí)例對象的屬性無法用State 做管理狀態(tài)
這種情況, this.p.friend.age的值變化, 頁面不會跟隨變化
friend?: Person 表示傳入的參數(shù)可選 (可傳可不傳)
class Person {
name: string
age: number
friend: Person
constructor(name: string, age: number, friend?: Person) {
this.name = name
this.age = age
this.friend = friend
}
}
@Entry
@Component
struct StatePage2 {
@State p: Person = new Person('馬云', 77, new Person('劉強(qiáng)東',52, null))
build() {
Column({space: 20}){
Text(`姓名: ${this.p.friend.name} _年齡: ${this.p.friend.age}`)
.fontSize(30)
.onClick((e)=> {
this.p.friend.age++
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
數(shù)組使用狀態(tài)管理時, 刪除元素,添加元素都會觸發(fā), 修改數(shù)組中某個對象的某個屬性, 不會觸發(fā)
@prop和@Link
截屏2024-05-15 11.49.03.png
@Provide和@Comsume
爺爺組件和孫子組件之間的數(shù)據(jù)傳遞
爺爺寫@Provide
@Provide totalTask: number
孫子寫@Comsume
@Comsume totalTask: number
totalTask屬性數(shù)據(jù)就會自動進(jìn)行傳遞
@Observed和@ObjectLink 需要配合使用
截屏2024-07-03 11.41.42.png
@Observed //修飾對象作為嵌套對象時,修改對象屬性, 能夠觸發(fā)數(shù)據(jù)同步
class Person {
name: string
age: number
gf: Person
constructor(name: string,age: number, gf?: Person) {
this.name = name
this.age = age
this.gf = gf
}
}
@Entry
@Component
struct ObservedAndObjectLink {
@State dava: Person = new Person("davai",18,new Person("luxi", 18))
build() {
Column({space: 20}){
// Child(this.dava)
Text( `name: ${this.dava.name} age: ${this.dava.age}`)
.fontSize(30)
.onClick(e => {
this.dava.age++;
})
Child({p: this.dava.gf})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
@Component
struct Child {
@ObjectLink p: Person //申明對象需要進(jìn)行雙向數(shù)據(jù)綁定
build(){
Text( `name: ${this.p.name} age: ${this.p.age}`)
.fontSize(30)
.onClick(e => {
this.p.age++;
})
}
}
函數(shù)作為參數(shù)傳遞
傳遞時, 如果函數(shù)中需要訪問當(dāng)前方法中的this, 則需要在參數(shù)傳遞時進(jìn)行bind 操作
例如下面 Child({changeFinishTask: this.resetfinishTask.bind(this)}), 這樣方法中的this才能訪問到tasks, totalTask 等屬性
@Component
struct TaskList {
@Link tasks: Task[]
@Link totalTask: number
@Link finishTask: number
build() {
Child({changeFinishTask: this.resetfinishTask.bind(this)})
}
resetfinishTask() {
this.finishTask = this.tasks.filter(item => item.finish).length
}
}
@Component
struct Child {
changeFinishTask: () => void
build(){}
}
