1# !! Syntax: Two-Way Binding
2In state management V1, [$$](./arkts-two-way-sync.md) is used for two-way binding of built-in components.
3In state management V2, the **!!** syntactic sugar is used to implement two-way binding of components in a unified manner.
4
5
6>**NOTE**
7>
8>The **!!** syntax is supported since API version 12.
9>
10>State management V2 is still under development, and some features may be incomplete or not always work as expected.
11
12## Overview
13
14**!!** is a syntactic sugar used to implement two-way binding of components in initialization of \@Param and \@Event of the child components. The \@Event method name must be declared as "$" + \@Param attribute name. For details, see [Use Scenarios](#use-scenarios).
15
16- If the parent component uses **!!**, the change of the parent component will be synchronized to the child component, and vice versa.
17- If the parent component does not use **!!**, the change of the parent component is unidirectional.
18
19
20## Constraints
21**!!** does not support multi-layer parent-child component transfer.
22
23
24## Use Scenarios
25
26### Two-Way Binding Between Custom Components
271. Construct the **Star** child component in the **Index** component, bind the value in the parent and child components bidirectionally, and initialize **@Param value** and **@Event $value** of the child component.
28- The two-way binding syntactic sugar can be considered as:
29
30    ```
31    Star({ value: this.value, $value: (val: number) => { this.value = val }})
32    ```
332. Click the button in the **Index** component to change the value, and **Text** in both the parent component **Index** and child component **Star** will be updated.
343. Click the button in the child component **Star** to invoke **this.$value(10)**, and **Text** in both the parent component **Index** and child component **Star** will be updated.
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```
69