@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'
@Builder
show(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'
}
@Builder
show($$: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 = ''
}