textarea html5 Api13 Text组件双向绑定_鸿蒙开发：了解$运算符

前言

本文基于Api13

存在这样一个需求，需要设计一个Text组件。该组件的功能是同步显示其内部的内容，即当输入任何内容至组件中时，Text组件应相应地展示出这些内容。那么，如何才能实现这一需求呢？

聪明的学子自然能领悟到，这实则是一种双向关联，操作起来并不复杂，只需使用@State装饰器即可轻松实现。事实上，@State装饰器具备这样的功能，即当其内容发生变动时，我们只需对被@State装饰器修饰的变量进行重新赋值，随后Text组件便能加载这个更新后的变量。

简单代码如下：

@Entry
@Component
struct Index {
  @State message: string = ""
  build() {
    Column() {
      Text(this.message)
        .fontSize(18)
      TextInput()
当值发生变化时，执行以下操作：
          this.message = value
        })
    }.height("100%")
    .width("100%")
设置内容的对齐方式为居中，采用弹性对齐方式。
  }
}

运行之后效果：

那么，除了上述方法，是否尚存在一种更为简便的途径呢？当然，这样的方法确实存在，那就是$运算符。借助这个运算符，双向绑定的实现过程将变得更加简便。接下来，我们只需对代码进行相应的调整：

 Text(this.message)
        .fontSize(18)
TextInput组件接收参数，其中包含文本内容，即当前的消息。

这段代码执行后，其呈现的效果与之前所述完全一致；观察可知，通过运用$运算符，我们无需再独立监控输入框内容的变动，该运算符本身便确保了TS变量与系统组件内部状态的同步更新。

什么是$运算符

一句话阐释：系统组件通过运算符提供了对ts变量的引用，借助这一功能，ts变量与组件内部状态得以同步更新。值得注意的是，目前这一功能仅适用于基础类型变量。至于装饰器，目前仅支持三种，即@State、@Link和@Prop装饰器。

支持实现双向关联的组件种类繁多，几乎具备内部状态特性的组件都能实现这一功能，例如输入框组件、单选按钮组件以及多选按钮组件等，均予以支持。以下是当前所支持的组件清单：

采用的方式，大体上是相同的，例如针对组件，我们只需设定属性，完成绑定操作即可。

  Text(this.select.toString())
      Checkbox()
        .select($this.select)

相关总结

运算符的使用相对直观，它的引入有效解决了组件状态与变量同步的难题。此外，还需注意，当使用$绑定的变量发生变动时，界面将自动进行同步更新，前提是您确实在使用该变量。