鸿蒙UI开发快速入门 —— part07:组件状态管理之@Prop/@Link装饰器

1、前言

我们在上一章学习了@State装饰器，@State装饰器的作用范围仅仅在当前组件，接下来，我们讨论如何从父组件中传入参数到子组件，让子组件随着父组件的状态发生变化。本章将要介绍的就是：@Props装饰器。

2、@Props装饰器

@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。

• @Prop变量允许在本地修改和初始化，但修改后的变化不会同步回父组件。

• 当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值，而在父组件中对应的@State装饰的变量被修改后，子组件本地修改的@Prop装饰的相关变量值将被覆盖。

• @Prop装饰器不能在@Entry装饰的自定义组件中使用。

• 装饰器允许装饰的变量类型有：string、number、boolean、enum类型。不支持any，不允许使用undefined和null。

• 装饰的变量必须指定类型，在父组件中，传递给@Prop装饰的值不能为undefined或者null；

• @Prop装饰的变量和父组件状态变量类型相同，即@Prop : S和@State : S

• 虽然说@Props装饰的变量可由父组件初始化，但使用范围依旧只能在组件内访问。

核心代码结构如下：

@Componentstruct Child {
  
   // 子组件中的@Props变量，可以被父组件初始化  @Prop count: number;}@Entrystruct Parent {
  
    @State parentCount:number = 1;  build() {
  
    // 此时，父组件就将本地parentCount变量传递给了子组件  // 当parentCount发生变化时，子组件也会刷新  Child({count: this.parentCount});  }}

3、@Props装饰器的简单使用Demo

以下示例是@State到子组件@Prop简单数据同步，

父组件ParentComponent的状态变量countDownStartValue初始化子组件CountDownComponent中@Prop装饰的count，

点击“Try again”，count的修改仅保留在CountDownComponent，不会同步给父组件ParentComponent。

ParentComponent的状态变量countDownStartValue的变化将重置CountDownComponent的count。

@Componentstruct CountDownComponent {
  
    @Prop count: number;  costOfOneAttempt: num