![](https://s5-media.51cto.com/ost/pc/static/noavatar.gif)
回复
本博客由 金陵科技学院-开放原子开源社 徐晨璐编写
举一个典型例子,银行小偷
struct CountDownBtn{
@Prop pCount:number
build(){
Button(`我是银行黑色,我偷一块钱.还剩${this.pCount}元.`)
.onClick(()=>{
this.pCount-=1
})
}
}
@Entry
@Component
struct Third {
@State count:number =100
build() {
Row() {
Column({space:10}) {
Text(`您的账户余额还有${this.count}元`)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button("我买10块钱的东西")
.onClick(()=>{
this.count-=10
})
CountDownBtn({
pCount: this.count
})
}
.width('100%')
}
.height('100%')
}
}
展示效果
在这个代码中,当点击"我买10块钱的东西"时,则会出现以下页面
当点击"我是银行黑色,我偷一块钱,还剩100元",则会出现以下页面
大家从上图可以发现,小偷偷了钱以后,账户里的钱并没有发生改变,所以到底是什么原因呢?
其实是@prop在起作用
在这里,@Prop的作用仅仅传播属性,仅接受,但不改变。
this.pCount-=1 这条语句也只对组件内部有效
接下来让我们看看另一个代码
struct CountDownBtn{
@Link iCount:number
build(){
Button(`我是银行黑色,我偷一块钱.还剩${this.iCount}元.`)
.onClick(()=>{
this.iCount-=1
})
}
}
@Entry
@Component
struct Third {
@State count:number =100
build() {
Row() {
Column({space:10}) {
Text(`您的账户余额还有${this.count}元`)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button("我买10块钱的东西")
.onClick(()=>{
this.count-=10
})
CountDownBtn({
iCount: $count
})
}
.width('100%')
}
.height('100%').padding(10)
}
}
展示效果
在这个代码中,当点击"我买10块钱的东西"时,则会出现以下页面
当点击"我是银行黑色,我偷一块钱,还剩100元",则会出现以下页面
大家从上图可以发现,小偷偷了钱以后,账户里的钱就随之发生了改变
在这里,@Link是与上级联动,点击后,this.iCout-=-1联动生效