开始

在我们项目实战中其实有很多双向监听改变数据的，比方点赞、评论、购物车添加、减少商品等等，接下来我们来讲讲@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修饰符利用父组件与子组件进行双向绑定来改变数据

本文正在参加华为鸿蒙有奖征文征文活动

【纯血鸿蒙】之@Link修饰符使用

开始

效果图

开发环境

使用

总结