前言
本文基于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 |
| CheckboxGroup | selectAll |
| DatePicker | selected |
| TimePicker | selected |
| MenuItem | selected |
| Panel | mode |
| Radio | checked |
| Rating | rating |
| Search | value |
| SideBarContainer | showSideBar |
| Slider | value |
| Stepper | index |
| Swiper | index |
| Tabs | index |
| TextArea | text |
| TextInput | text |
| TextPicker | selected、value |
| Toggle | isOn |
| AlphabetIndexer | selected |
| Select | selected、value |
| BindSheet | isShow |
| BindContentCover | isShow |
| Refresh | refreshing |
| GridItem | selected |
| ListItem | selected |
使用方式，基本上是一致的，比如Checkbox组件，我们实现select属性，进行绑定即可。
Text(this.select.toString())
Checkbox()
.select($$this.select)相关总结
$$运算符相对来说还是比较的简单，它的出现，解决了组件状态和变量同步的问题，还有一点需要知道，在$$绑定的变量变化时，会触发UI的同步刷新，当然了在你使用到该变量的时候。
本文标签：HarmonyOS/ArkUI
