@Builder的基本語法數據是不會響應式的
第一種:
全局插槽:傳入的變量是@state數據(數據是對象也一樣),但是button點擊更改,并沒有任何反應。規則就是不更新
@Entry
@Component
struct Demo02 {@State message: string = 'Hello World'build() {Row() {Column() {show(this.message)Button('點擊').onClick((event: ClickEvent) => {this.message = "666"})}.width('100%')}.height('100%')}
}
//全局插槽
@Builder
function show(content:string){Row(){Text(content)}
}
第二種:局部插槽:傳入的變量是@state數據(數據是對象也一樣),但是button點擊更改,并沒有任何反應。規則就是不更新
@Entry
@Component
struct Demo03 {@State message: string = 'Hello World'@Buildershow(content:string){Row(){Text(content)}}build() {Row() {Column() {this.show(this.message)Button("點擊").onClick((event: ClickEvent) => {this.message = "666"})}.width('100%')}.height('100%')}
}
@Builder的新語法數據可以響應式
寫法需要注意:
1、傳入的需要時對象,$$是官方提供的語法糖,只是一個代號
2、 this.show({name:this.msg.name}) 這個寫法是最重要的,傳入的必須寫成展開對象,并且屬性值是變量。直接傳this.msg做不到響應式(這是個大坑)
@Entry
@Component
struct Demo03 {@State message: string = 'Hello World'@State msg:A = {name:'zhangsan'}@Buildershow($$:A){Row(){Text($$.name)}}build() {Row() {Column() {this.show({name:this.msg.name})Button("點擊").onClick((event: ClickEvent) => {this.msg.name = "lisi"})}.width('100%')}.height('100%')}
}class A {name:string = ''
}