【鸿蒙实战开发】HarmonyOS-@Link修饰符使用教程

开始

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

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。随着鸿蒙的不断发展以及国家的大力支持,未来鸿蒙职位肯定会迎来一个大的爆发,只有积极应对变化，不断学习和提升自己，我们才能在这个变革的时代中立于不败之地。