• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @Prop
2
3**@Prop** and **@State** have the same semantics but different initialization modes. A **@Prop** decorated variable in a component must be initialized using the **@State** decorated variable in its parent component. The **@Prop** decorated variable can be modified in the component, but the modification is not updated to the parent component; the modification to the **@State** decorated variable is synchronized to the **@Prop** decorated variable. That is, **@Prop** establishes one-way data binding.
4
5
6The **@Prop** decorated state variable has the following features:
7
8
9- Support for simple types: The number, string, and boolean types are supported.
10
11- Private: Data is accessed only within the component.
12
13- Support for multiple instances: A component can have multiple attributes decorated by **@Prop**.
14
15- Support for initialization with a value passed to the **@Prop** decorated variable: When a new instance of the component is created, all **@Prop** decorated variables must be initialized. Initialization inside the component is not supported.
16
17
18## Example
19
20
21```
22@Entry
23@Component
24struct ParentComponent {
25    @State countDownStartValue: number = 10 // 10 Nuggets default start value in a Game
26    build() {
27        Column() {
28            Text(`Grant ${this.countDownStartValue} nuggets to play.`)
29            Button() {
30                Text('+1 - Nuggets in New Game')
31            }.onClick(() => {
32                this.countDownStartValue += 1
33            })
34            Button() {
35                Text('-1  - Nuggets in New Game')
36            }.onClick(() => {
37                this.countDownStartValue -= 1
38            })
39            // When creating a child component, you must provide the initial value of its @Prop decorated variable in the constructor parameter and initialize the regular variable CostOfOneAttump (not Prop).
40            CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2})
41        }
42    }
43}
44
45@Component
46struct CountDownComponent {
47    @Prop count: number
48    private costOfOneAttempt: number
49
50    build() {
51        Column() {
52            if (this.count > 0) {
53                Text(`You have ${this.count} Nuggets left`)
54            } else {
55                Text('Game over!')
56            }
57
58            Button() {
59                Text('Try again')
60            }.onClick(() => {
61                this.count -= this.costOfOneAttempt
62            })
63        }
64    }
65}
66```
67
68In the preceding example, when the user presses **+1** or **-1**, the status of the parent component changes and the **build** method is executed again. In this case, a new **CountDownComponent** instance is created. The **countDownStartValue** attribute of the parent component is used to initialize the **@Prop** decorated variable of the child component. When the **Try again** button of the child component is touched, the value of the **@Prop** decorated variable **count** is changed. As a result, the **CountDownComponent** is rendered again. However, the change of the **count** value does not affect the **countDownStartValue** value of the parent component.
69
70> **NOTE**
71>
72> When a new component instance is created, all its **@Prop** decorated variables must be initialized.
73