目录

!!语法：双向绑定

在状态管理V1中，推荐使用$$实现系统组件的双向绑定。

在状态管理V2中，推荐使用!!语法糖统一处理双向绑定。

!!语法从API version 12开始支持。

概述

!!双向绑定语法，是一个语法糖，方便开发者实现数据双向绑定，用于初始化子组件的@Param装饰的属性和@Event装饰的事件。其中@Event方法名需要声明为“$”+ @Param属性名，详见使用场景。

使用场景

[h2]自定义组件间双向绑定

  1. 在Index中构造Star子组件，双向绑定父子组件中的value属性，并初始化子组件的@Param value和@Event $value。

    @Param与@Event装饰器配合使用的双向绑定语法糖。

    Star({ value: this.value, $value: (val: number) => { this.value = val; } })

    上述语法可以简化为!!双向绑定语法糖。

    Star({ value: this.value!! })

  2. 使用@Param value与@Event $value语法实现自定义组件双向绑定。

    @Entry
@ComponentV2
struct Index {
  @Local value: number = 0;

  build() {
    Column() {
      Text(`${this.value}`)
      // 点击Index中的Button改变value值，父组件Index和子组件Star中的Text将同步更新。
      Button(`change value in parent component`).onClick(() => {
        this.value++;
      })
      // 使用@Param与@Event语法实现自定义组件双向绑定。
      Star({ value: this.value, $value: (val: number) => { this.value = val; } })
      // ...
    // ...
    }
  }
}

@ComponentV2
struct Star {
  @Param value: number = 0;
  @Event $value: (val: number) => void = (val: number) => {};

  build() {
    Column() {
      Text(`${this.value}`)
      // 点击子组件Star中的Button，调用`this.$value(10)`方法，父组件Index和子组件Star中的Text将同步更新。
      Button(`change value in child component`).onClick(() => {
        this.$value(10);
      })
    }
  }
}

  3. 使用!!语法糖实现自定义组件双向绑定。

    @Entry
@ComponentV2
struct Index {
  @Local value: number = 0;

  build() {
    Column() {
      Text(`${this.value}`)
      // 点击Index中的Button改变value值，父组件Index和子组件Star中的Text将同步更新。
      Button(`change value in parent component`).onClick(() => {
        this.value++;
      })
      // 使用!!语法糖实现自定义组件双向绑定。
      Star({ value: this.value!! })
      // ...
    }
  }
}

@ComponentV2
struct Star {
  @Param value: number = 0;
  @Event $value: (val: number) => void = (val: number) => {};

  build() {
    Column() {
      Text(`${this.value}`)
      // 点击子组件Star中的Button，调用`this.$value(10)`方法，父组件Index和子组件Star中的Text将同步更新。
      Button(`change value in child component`).onClick(() => {
        this.$value(10);
      })
    }
  }
}

使用限制

[h2]系统组件参数双向绑定

!!运算符为系统组件提供TS变量的引用，使得TS变量和系统组件的内部状态保持同步。添加方式是在变量名后添加!!，例如isShow!!。

内部状态的含义由组件或属性决定。例如：bindMenu属性的isShow参数。

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = 'click show Menu';
const DOMAIN = 0xFF00;

@Entry
@ComponentV2
struct BindMenuInterface {
  @Local isShow: boolean = false;

  build() {
    Column() {
      Row() {
        Text('click show Menu')
          .bindMenu(this.isShow!!, // 双向绑定。
            [
              {
                value: 'Menu1',
                action: () => {
                  hilog.info(DOMAIN, TAG, 'handle Menu1 click');
                }
              },
              {
                value: 'Menu2',
                action: () => {
                  hilog.info(DOMAIN, TAG, 'handle Menu2 click');
                }
              },
            ])
      }.height('50%')
      
      Text('isShow: ' + this.isShow).fontSize(18).fontColor(Color.Red)
      Row() {
        Button('Click')
          .onClick(() => {
            this.isShow = true;
          })
          .width(100)
          .fontSize(20)
          .margin(10)
      }
    }.width('100%')
  }
}

使用规则