1# !!语法:双向绑定 2在状态管理V1中使用[$$](./arkts-two-way-sync.md)用于内置组件双向绑定。 3在状态管理V2中,提供了归一处理,提供`!!`语法糖作为统一处理双向绑定语法。 4 5 6>**说明:** 7> 8>`!!`语法从API version 12开始支持。 9> 10>当前状态管理(V2试用版)仍在逐步开发中,相关功能尚未成熟,建议开发者尝鲜试用。 11 12## 概述 13 14`!!`双向绑定语法,是一个语法糖方便开发者实现数据双向绑定,用于初始化子组件的\@Param和\@Event。其中\@Event方法名需要声明为“$”+ \@Param属性名,详见[使用场景](#使用场景)。 15 16- 如果父组件使用了`!!`双向绑定语法,则表明父组件的变化会同步给子组件,子组件的变化也会同步给父组件。 17- 如果父组件没有使用`!!`,则父组件发生的变化是单向的。 18 19 20## 使用限制 21`!!`双向绑定语法不支持多层父子组件传递。 22 23 24## 使用场景 25 26### 自定义组件间双向绑定 271. Index中构造Star子组件,双向绑定父子组件中的value,初始化子组件的`@Param value`和`@Event $value` 28- 双向绑定语法糖可视为: 29 30 ``` 31 Star({ value: this.value, $value: (val: number) => { this.value = val }}) 32 ``` 332. 点击改变Index中的Button,改变value,父组件Index和子组件Star中Text更新。 343. 点击改变子组件Star中的Button,调用`this.$value(10)`,父组件Index和子组件Star中Text更新。 35 36```ts 37@Entry 38@ComponentV2 39struct Index { 40 @Local value: number = 0; 41 42 build() { 43 Column() { 44 Text(`${this.value}`) 45 Button(`change value`).onClick(() => { 46 this.value++; 47 }) 48 Star({ value: this.value!! }) 49 } 50 } 51} 52 53 54@ComponentV2 55struct Star { 56 @Param value: number = 0; 57 @Event $value: (val: number) => void = (val: number) => {}; 58 59 build() { 60 Column() { 61 Text(`${this.value}`) 62 Button(`change value `).onClick(() => { 63 this.$value(10); 64 }) 65 } 66 } 67} 68```