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