1# !!语法：双向绑定 2在状态管理V1中使用[$$](./arkts-two-way-sync.md)用于系统组件双向绑定。 3在状态管理V2中，提供了归一处理，提供`!!`语法糖作为统一处理双向绑定语法。 4 5 6>**说明：** 7> 8>`!!`语法从API version 12开始支持。 9> 10 11## 概述 12 13`!!`双向绑定语法，是一个语法糖方便开发者实现数据双向绑定，用于初始化子组件的\@Param和\@Event。其中\@Event方法名需要声明为“$”+ \@Param属性名，详见[使用场景](#使用场景)。 14 15- 如果父组件使用了`!!`双向绑定语法，则表明父组件的变化会同步给子组件，子组件的变化也会同步给父组件。 16- 如果父组件没有使用`!!`，则父组件发生的变化是单向的。 17 18 19## 使用场景 20 21### 自定义组件间双向绑定 221. Index中构造Star子组件，双向绑定父子组件中的value，初始化子组件的`@Param value`和`@Event $value`。 23- 双向绑定语法糖可视为： 24 25 ``` 26 Star({ value: this.value, $value: (val: number) => { this.value = val }}) 27 ``` 282. 点击改变Index中的Button，改变value，父组件Index和子组件Star中Text更新。 293. 点击改变子组件Star中的Button，调用`this.$value(10)`，父组件Index和子组件Star中Text更新。 30 31```ts 32@Entry 33@ComponentV2 34struct Index { 35 @Local value: number = 0; 36 37 build() { 38 Column() { 39 Text(`${this.value}`) 40 Button(`change value`).onClick(() => { 41 this.value++; 42 }) 43 Star({ value: this.value!! }) 44 } 45 } 46} 47 48 49@ComponentV2 50struct Star { 51 @Param value: number = 0; 52 @Event $value: (val: number) => void = (val: number) => {}; 53 54 build() { 55 Column() { 56 Text(`${this.value}`) 57 Button(`change value `).onClick(() => { 58 this.$value(10); 59 }) 60 } 61 } 62} 63``` 64 65 66## 使用限制 67- `!!`双向绑定语法不支持多层父子组件传递。 68- 不支持与@Event混用。从API version 18开始，当使用`!!`双向绑定语法给子组件传递参数时，给对应的@Event方法传参会编译报错。 69- 当使用大于等于3个感叹号（!!!、!!!!、!!!!!等）时，不支持双向绑定功能。 70 71 72### 系统组件参数双向绑定 73 74!!运算符为系统组件提供TS变量的引用，使得TS变量和系统组件的内部状态保持同步。添加方式是在变量名后添加，例如isShow!!。 75 76内部状态具体指什么取决于组件。例如，[bindMenu](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md)组件的isShow参数。 77 78#### 使用规则 79 80- 当前!!支持以下接口参数基础类型变量的双向绑定，也就是参数同步当前弹出菜单或气泡状态。!!双向绑定支持基础类型变量，当该变量使用状态管理V2[\@Local](arkts-new-local.md)或状态管理V1[\@State](arkts-state.md)装饰时，变量值的变化会触发UI刷新。 81 82 | 属性 | 支持的参数 | 起始API版本 | 83 | ------------------------------------------------------------ | --------------- | ----------- | 84 | [bindMenu](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindmenu11) | isShow | 13 | 85 | [bindContextMenu](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindcontextmenu12) | isShown | 13 | 86 | [bindPopup](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-popup.md#bindpopup) | show | 13 | 87 | [TextInput](../../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md#textinputoptions对象说明) | text | 18 | 88 | [TextArea](../../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md#textareaoptions对象说明) | text | 18 | 89 | [Search](../../reference/apis-arkui/arkui-ts/ts-basic-components-search.md#searchoptions18对象说明) | value | 18 | 90 | [BindSheet](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md) | isShow | 18 | 91 | [BindContentCover](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md) | isShow | 18 | 92 | [SideBarContainer](../../reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md#sidebarwidth) | sideBarWidth | 18 | 93 | [Navigation](../../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navbarwidth9) | navBarWidth | 18 | 94 | [Toggle](../../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md#toggleoptions18对象说明) | isOn | 18 | 95 | [Checkbox](../../reference/apis-arkui/arkui-ts/ts-basic-components-checkbox.md#select) | select | 18 | 96 | [CheckboxGroup](../../reference/apis-arkui/arkui-ts/ts-basic-components-checkboxgroup.md#selectall) | selectAll | 18 | 97 | [Radio](../../reference/apis-arkui/arkui-ts/ts-basic-components-radio.md#checked) | checked | 18 | 98 | [Rating](../../reference/apis-arkui/arkui-ts/ts-basic-components-rating.md#ratingoptions18对象说明) | rating | 18 | 99 | [Slider](../../reference/apis-arkui/arkui-ts/ts-basic-components-slider.md#slideroptions对象说明) | value | 18 | 100 | [Select](../../reference/apis-arkui/arkui-ts/ts-basic-components-select.md#selected) | selected | 18 | 101 | [Select](../../reference/apis-arkui/arkui-ts/ts-basic-components-select.md#value) | value | 18 | 102 | [MenuItem](../../reference/apis-arkui/arkui-ts/ts-basic-components-menuitem.md#selected) | selected | 18 | 103- !!绑定的[\@Local](arkts-new-local.md)变量变化时，会触发UI的同步刷新。 104 105 106#### 使用示例 107 108bindMenu接口isShow参数双向绑定功能。 109 110```ts 111@Entry 112@ComponentV2 113struct BindMenuInterface { 114 @Local isShow: boolean = false; 115 116 build() { 117 Column() { 118 Row() { 119 Text('click show Menu') 120 .bindMenu(this.isShow!!, // 双向绑定 121 [ 122 { 123 value: 'Menu1', 124 action: () => { 125 console.info('handle Menu1 click'); 126 } 127 }, 128 { 129 value: 'Menu2', 130 action: () => { 131 console.info('handle Menu2 click'); 132 } 133 }, 134 ]) 135 }.height('50%') 136 Text("当前isShow: " + this.isShow).fontSize(18).fontColor(Color.Red) 137 Row() { 138 Button("Click") 139 .onClick(() => { 140 this.isShow = true; 141 }) 142 .width(100) 143 .fontSize(20) 144 .margin(10) 145 } 146 }.width('100%') 147 } 148} 149``` 150 151 152
