HarmonyOS(32) @Link标签使用指南

前言

之前写过@Link的使用，最新的API有点变化，在此做个记录。

@Link简介

子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。。子组件变量发生变化，父组件也会随之变化，反之亦然。

@State和@Link的同步场景

使用示例

如下代码：

• Child组件定义了一个用@Link修饰的变量 count。注意@Link修饰的变量不能初始化，比如 @Link count: number=1，这种写法会报错
• Parent组件定义了一个用@State的变量countDownStartValue
• Child的count变量由Parent组件的countDownStartValue初始化

@Component
struct Child{
  //注意@Link修饰的变量不能初始化，比如  @Link count: number=1，这种会报错
   @Link count: number;

  build() {
    Column() {
      Text(`子组件当前数字 ${this.count}`)
      // @Prop装饰的变量不会同步给父组件
      Button(`子组件改变数字`).onClick(() => {
        this.count += 1;
      }).backgroundColor(Color.Red)
    }.margin({top:20})
  }
}

@Entry
@Component
struct Parent {
  @State countDownStartValue: number = 16;

  build() {
    Column() {
      Text(`父组件当前数字 ${this.countDownStartValue}`)
      // 父组件的数据源的修改会同步给子组件
      Button(`父组件改变数字`).onClick(() => {
        this.countDownStartValue += 1;
      })
   
      Child({ count: this.countDownStartValue }).margin({top:10})
    }.width("100%")
    .margin({top:100})
    .alignItems(HorizontalAlign.Center)
  }
}

• 初始化页面效果如下：
  
• 当点击一次蓝色按钮时，Child和Parent的数字都变成17
  
• 当再点击一次红色按钮时，Child和Parent都变成了18
  

参考资料

@Link装饰器：父子双向同步
@Link入门使用