ts-component-states-prop.md

# @Prop

**@Prop** 具有与 **@State** 相同的语义，但初始化方式不同。 **@Prop** 装饰的变量必须使用其父组件提供的 **@State** 变量进行初始化，允许组件内部修改 **@Prop** 变量，但上述更改不会通知给父组件，即 **@Prop** 属于单向数据绑定。

**@Prop** 状态数据具有以下特征：


- **支持简单类型：** 仅支持简单类型：number、string、boolean；

- **私有：** 仅在组件内访问；

- **支持多个实例：** 一个组件中可以定义多个标有 **@Prop** 的属性；

- **创建自定义组件时将值传递给 @Prop 变量进行初始化：** 在创建组件的新实例时，必须初始化所有 **@Prop** 变量，不支持在组件内部进行初始化。


## 示例

```
@Entry
@Component
struct ParentComponent {
    @State countDownStartValue: number = 10 // 10 Nuggets default start value in a Game
    build() {
        Column() {
            Text(`Grant ${this.countDownStartValue} nuggets to play.`)
            Button() {
                Text('+1 - Nuggets in New Game')
            }.onClick(() => {
                this.countDownStartValue += 1
            })
            Button() {
                Text('-1  - Nuggets in New Game')
            }.onClick(() => {
                this.countDownStartValue -= 1
            })

            // when creatng ChildComponent, the initial value of its @Prop variable must be supplied
            // in a named constructor parameter
            // also regular costOfOneAttempt (non-Prop) variable is initialied
            CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2})
        }
    }
}

@Component
struct CountDownComponent {
    @Prop count: number
    private costOfOneAttempt: number

    build() {
        Column() {
            if (this.count > 0) {
                Text(`You have ${this.count} Nuggets left`)
            } else {
                Text('Game over!')
            }

            Button() {
                Text('Try again')
            }.onClick(() => {
                this.count -= this.costOfOneAttempt
            })
        }
    }
}
```

在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行**build**方法，此时将创建一个新的**CountDownComponent**组件。父组件的**countDownStartValue**状态属性被用于初始化子组件的 **@Prop** 变量。当按下子组件的“Try again”按钮时，其 **@Prop** 变量**count**将被更改，这将导致**CountDownComponent**重新渲染。但是，**count**值的更改不会影响父组件的**countDownStartValue**值。

> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 创建新组件实例时，必须初始化其所有 **@Prop** 变量。