鸿蒙HarmonyOS应用开发 了解$$运算符

前言

本文基于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的同步刷新，当然了在你使用到该变量的时候。