学习笔记（四十六）：$$语法：内置组件双向同步

概述：

$$运算符为系统内置组件提供TS变量的引用，使得TS变量和系统内置组件的内部状态保持同步

使用规则：

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

2、$$绑定的变量变化时，会触发UI的同步刷新

3、支持的组件

 

使用示例：

@Entity
@Component
export struct LoginAccount {
  @State userName:string = ""; // 用户名
  @State passWord:string = ""; // 密码

  submit(){
    console.log('submit')
    console.log('userName->'+this.userName)
    console.log('passWord->'+this.passWord)
  }
  build() {
    Column() {
      Image($r('app.media.logo'))
        .width(150)
        .margin({ top:120 })
      Text().layoutWeight(1)
      TextInput({text:$$this.userName,placeholder:'请输入账号'})
        .padding(10)
        .width('70%')
        .borderWidth(0)
        .margin({bottom:16})
        .borderRadius(4)
        .maxLength(64)
      TextInput({text:$$this.passWord,placeholder:'请输入密码'})
        .padding(10)
        .width('70%')
        .borderWidth(0)
        .type(InputType.Password)
        .borderRadius(4)
        .margin({bottom:20})
        .maxLength(64)
      Button('登录')
        .type(ButtonType.Normal)
        .borderRadius(4)
        .width('70%')
        .backgroundColor($r('app.color.main_color'))
        .margin({top:20,bottom:40})
        .onClick(()=>this.submit())
    }
    .backgroundColor(0x50000000)
    .width('100%')
    .height('100%')
  }
}