开始
在我们项目实战中其实有很多双向监听改变数据的,比方点赞、评论、购物车添加、减少商品等等,接下来我们来讲讲@Link修饰符,官方是这么解释的
●子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
●@Link装饰的变量与其父组件中的数据源共享相同的值。
●@Link装饰器不能在@Entry装饰的自定义组件中使用。
接下来我们用@Link来做个添加库存和价格的demo,先来看看效果图
效果图
开发环境
●Windows
●DevEco Studio NEXT Developer Preview2
●HarmonyOS next Developer Preview2
●java version “11.0.18” 2023-01-17 LTS
●hdc 1.2.0a
●手机:Mate 60Pro (HarmonyOS NEXT Developer Preview2)
使用
●增加模拟数据
@State drugList: DrugClass[] = [{
drug_name: '感冒灵',
drug_price: 6,
drug_count: 3
}, {
drug_name: '白加黑',
drug_price: 5,
drug_count: 5
}, {
drug_name: '枇杷膏',
drug_price: 9,
drug_count: 5
}]
●定义实体
class DrugClass {
drug_name: string = ""
drug_price: number = 0
drug_count: number = 0
}
●渲染数据
build() {
Column() {
ForEach(this.drugList, (item: DrugClass) => {
Row() {
Text('药名:' + item.drug_name)
Text('药品价格:' + item.drug_price.toFixed())
Text('药品存量:' + item.drug_count.toString())
}.height(30).width('100%').justifyContent(FlexAlign.SpaceBetween)
})
AddDrugComp({ drugList: this.drugList }) //api11写法
//AddDrugComp({ drugList: $drugList }) //api9写法
}
}
●然后写个AddDrugComp组件,通过@Link修饰符把上层的数据源drugList传递给子组件(注意:api11之前需要用$,api11直接可以用this),进行双向改变数据
@Component
struct AddDrugComp {
@Link
drugList: DrugClass[]
build() {
Column({ space: 20 }) {
Button("批量添加库存").onClick(() => {
this.drugList = this.drugList.map(item => {
item.drug_count++
return item
})
})
Button("批量添加价格").onClick(() => {
this.drugList = this.drugList.map(item => {
item.drug_price++
return item
})
})
}
}
}
好了,大功告成!
总结
其实用法很简单,就是通过@Link修饰符利用父组件与子组件进行双向绑定来改变数据