HarmonyOS NEXT 数据双向绑定$$

摘要

$$运算符为系统内置组件提供TS变量的引用，使得TS变量和系统内置组件的内部状态保持同步。
内部状态具体指什么取决于组件。

• 当前$$支持基础类型变量，以及@State、@Link和@Prop装饰的变量。

一、代码实例

@Entry
@Component
struct Page_checkbox {
  @State
  isChecked:boolean = true

  build() {
    Column() {
      Text(this.isChecked + '')
      Checkbox()
        // .shape(CheckBoxShape.ROUNDED_SQUARE)// 这里有坑,编译器会报错
        .select($$this.isChecked)// 加上双向绑定$$
    }
    .height('100%')
    .width('100%')
  }
}

二、onChange写法

@Entry
@Component
struct Page_checkbox {
  @State
  isChecked:boolean = true

  build() {
    Column() {
      Text(this.isChecked + '')
      Checkbox()
        // .shape(CheckBoxShape.ROUNDED_SQUARE)// 这里有坑,编译器会报错
        // .select($$this.isChecked)// 加上双向绑定$$ 方式1
        .select(this.isChecked) // 方式2 用onchange
        .onChange((value)=>{
          this.isChecked = value
        })
    }
    .height('100%')
    .width('100%')
  }
}

三、说明

• $$ 就是为了替换onChange
• 双向数据绑定 $$ 等于 数据驱动视图@state与视图更新数据(事件)
• interface的属性，不能直接绑定。它这个双向绑定只更新第一层