第六讲_ArkTS装饰器（三）

1. @State装饰器

@State装饰的变量，称为状态变量。当状态变量改变时，UI会发生对应的渲染改变。

1.1 @State装饰器特点

1. @State 装饰的变量，是私有的，只能从组件内部访问。
2. 在声明时必须指定类型和本地初始化。

1.2 @State装饰器使用示例

@Entry
@Component
struct MyComponent {
  // 定义一个状态变量
  @State count: number = 0;

  build() {
    Column() {
      // Text组件显示count的值
      Text(`count=${this.count}`)
      // Button是系统组件，添加一个点击事件，点击一次就给count + 1
      Button("点击+1")
        .onClick(() => {
          this.count++
        })
    }
  }
}

1.3 @State变量的传递规则

父组件中哪些变量可以用来初始化子组件中的@State变量？
@State变量可以用来初始化子组件中的哪些变量？

2. @Prop装饰器

@Prop装饰的变量可以和父组件建立单向的同步关系。

• 当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。
• @Prop变量允许在本地修改，但修改后的变化不会同步回父组件。

2.1 @Prop装饰器特点

1. @Prop装饰器不能在@Entry装饰的自定义组件中使用。
2. 在声明时必须指定类型，但可以不进行本地初始化。

2.2 @Prop装饰器使用示例

@Entry
@Component
struct Parent {
  // 定义一个状态变量
  @State count: number = 0;

  build() {
    Column() {
      // 使用自定义Child组件，并用Parent中count初始化Child中的count
      // 当Parent中count改变时，Child中的count也会同步修改
      Child({count: this.count})
      Text(`Parent组件中count=${this.count}`)
      // Button是系统组件，添加一个点击事件，点击一次就给count + 1
      Button("点击+1")
        .onClick(() => {
          this.count++
        })
    }
  }
}

@Component
struct Child {
  // 定义一个@prop变量
  @Prop count: number

  build() {
    Text(`Child组件中count=${this.count}`)
  }
}

2.3 @Prop变量的传递规则

父组件中哪些变量可以用来初始化子组件中的@Prop变量？
@Prop变量可以用来初始化子组件中的哪些变量？

3. @Link装饰器

@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

• 当父组件中的数据源更改时，与之相关的@Link装饰的变量都会自动更新。
• @Link变量更改时，变化也会同步回父组件。

3.1 @Link装饰器特点

1. @Link装饰器不能在@Entry装饰的自定义组件中使用。
2. 在声明时必须指定类型，不能进行本地初始化，并必须父组件初始化。
3. 父组件初始化时，必须用$变量名格式。

3.2 @Link装饰器使用示例

@Entry
@Component
struct Parent {
  // 定义一个状态变量
  @State count: number = 0;

  build() {
    Column() {
      // 使用自定义Child组件，并用Parent中的count初始化Child中的count
      // 给@Link变量初始化，必须使用$
      // 当Parent中的count改变时，Child中的count也会同步改变
      Child({count: $count})
      Text(`Parent组件中count=${this.count}`)
      // Button是系统组件，添加一个点击事件，点击一次就给count + 1
      Button("Parent组件中的点击+1")
        .onClick(() => {
          this.count++
        })
    }
  }
}

@Component
struct Child {
  // 定义一个@Link变量
  // 当Child中的count改变，Parent中的count也会同步改变
  @Link count: number

  build() {
    Column() {
      Text(`Child组件中count=${this.count}`)
      Button("Child组件中的点击+1")
        .onClick(() => {
          this.count++
        })
    }
  }
}

3.3 @Link变量的传递规则

父组件中哪些变量可以用来初始化子组件中的@Link变量？
@Link变量可以用来初始化子组件中的哪些变量？