【鸿蒙实战开发】HarmonyOS状态管理之@Link

前言

在前面两篇状态管理相关的文章中，我们分别讲解了 @State 和 @Prop 两个状态管理装饰器的作用和基本使用。@State 状态管理装饰器是最基本的状态管理装饰器，组件使用其修饰的变量，组件的更新可以随着变量的变化而更新；@Prop 状态管理装饰器则是用于父子组件之间的单向同步。
本篇文章要讲解的 @Link 状态管理装饰器则是用于父子之间的双向同步管理。下面看下该状态管理修饰器的基本使用。

@Link 的基本使用

假设我们有一个需求：有一个用户展示页面，可以展示用户的默认用户名，也可以在子组件的编辑框去修改默认用户名，且修改时要同步修改父组件展示的用户名。
要实现这个需求，首先我们定义一个子组件用来编辑父组件传递进来的用户名，具体代码如下：

@Component
struct UserDetail {
  @Link userName: string;
  build() {
    TextArea({ text: this.userName })
      .onChange((value: string) => {
        this.userName = value
      })
  }
}

这里我们定义子组件的名字为 UserDetail，它包含一个 @Link 状态管理修饰符修饰的变量 - userName。它的内部由一个可编辑的输入框 TextArea 组成，我们在输入框的 onChange 回调中去同步修改 this.userName 的值。由于 userName 是由 @Link 修饰的，所以这个修改会同步修改到父组件中。
接着，就是编写父组件来显示用户名，具体代码如下：

@Entry
@Component
struct Index {
  @State userName: string = "默认用户名";

  build() {
    Column() {
      Text(this.userName)
      Blank().height(10)