• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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```