前言

本文基于Api13

有这样一个需求，一个Text组件，一个TextInput组件，要求Text组件同步展示TextInput组件里的内容，也就是TextInput组件输入什么内容，就要在Text组件里展示什么内容，这个需求如何实现呢？

聪明的同学肯定能够想到，这不就是双向绑定吗，这还不简单，@State装饰器就可以搞定啊，确实，@State装饰器可以实现，当TextInput的内容发生变化时，我们给@State装饰器修饰的变量进行赋值，Text组件加载这个变量即可。

简单代码如下：

@Entry
@Component
struct Index {
  @State message: string = ""

  build() {
    Column() {
      Text(this.message)
        .fontSize(18)
      TextInput()
        .onChange((value: string) => {
          this.message = value
        })
    }.height("100%")
    .width("100%")
    .justifyContent(FlexAlign.Center)

  }
}

运行之后效果：

那么除了以上的方式，还有没有一个更简单的方式呢？哎，必须有，这就是$运算符，使用它，可以让双向绑定实现起来更加的简单，我们把代码修改一下：

 Text(this.message)
        .fontSize(18)
TextInput({ text: $this.message })

以上的代码，运行之后，和上面的效果是一模一样的，可以看到，使用了$运算符后，我们不用再单独的去监听输入框的内容变化，它自身就实现了TS变量和系统组件的内部状态保持同步。

什么是$运算符

一句话解读：$运算符是系统组件提供ts变量的引用，使用它可以使得ts变量和组件的内部状态保持同步，有一点需要知道，那就是当前仅基础类型变量，至于装饰器的话，也仅仅支持三个，分别是@State、@Link和@Prop装饰器。

支持双向绑定的组件就比较多了，凡是有内部状态属性的组件基本上都支持，像输入组件，单选组件，多选组件等等都是支持的，目前支持的组件列表如下：

使用方式，基本上是一致的，比如Checkbox组件，我们实现select属性，进行绑定即可。

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

相关总结

$运算符相对来说还是比较的简单，它的出现，解决了组件状态和变量同步的问题，还有一点需要知道，在$绑定的变量变化时，会触发UI的同步刷新，当然了在你使用到该变量的时候。

本文标签：HarmonyOS/ArkUI