鸿蒙开发10-状态变量-CSDN博客

本文链接：https://blog.csdn.net/qq_25218777/article/details/147342537

在 ArkTS 中，状态变量是指被状态装饰器装饰的变量，其值的改变会引起 UI 的渲染更新。以下是对 ArkTS 中一些常用状态变量装饰器的详细介绍：

@State

用于将组件内的变量标记为状态变量。只有被@State装饰的变量，其值的改变才能引起 UI 的重新渲染。支持Object、class、string、number、boolean、enum类型以及这些类型的数组。该变量具有以下特征：

支持Object、class、string、number、boolean、enum类型及其数组。
每个组件实例的状态数据相互独立。
属于组件内部私有变量，只能在组件内访问。
必须进行本地初始化。

@Entry
@Component
struct StateExample {
  @State count: number = 0;

  build() {
    Column({ space: 50 }) {
      Text(`当前计数: ${this.count}`)
        .fontSize(30)
      Button('点击增加计数')
        .onClick(() => {
          this.count++;
        })
    }
    .width('100%')
  }
}

在这个例子中，count变量被@State装饰，点击按钮时count的值增加，界面会自动更新显示新的计数值。

@Prop

@Prop用于父组件向子组件单向传递数据。子组件通过@Prop接收数据，但不能直接修改。其特点如下：

仅支持number、string、boolean等简单数据类型。
属于组件内部私有变量。
组件内可定义多个@Prop属性。
创建组件实例时必须初始化所有@Prop变量，不支持在组件内部初始化。

@Component
struct ChildComponent {
  @Prop message: string;

  build() {
    Text(this.message)
      .fontSize(30)
  }
}

@Entry
@Component
struct PropExample {
  @State parentMessage: string = '来自父组件的消息';

  build() {
    Column({ space: 50 }) {
      ChildComponent({ message: this.parentMessage })
      Button('更新消息')
        .onClick(() => {
          this.parentMessage = '更新后的消息';
        })
    }
    .width('100%')
  }
}

这里父组件的parentMessage通过@Prop传递给子组件ChildComponent，点击按钮更新父组件消息时，子组件会显示新消息。

@Link

@Link用于在父子组件间建立双向数据绑定，子组件中被@Link装饰的变量和父组件对应的数据源双向同步。

@Component
struct ChildLinkComponent {
  @Link value: number;

  build() {
    Column({ space: 20 }) {
      Text(`子组件接收到的值: ${this.value}`)
        .fontSize(30)
      Button('子组件增加值')
        .onClick(() => {
          this.value++;
        })
    }
  }
}

@Entry
@Component
struct LinkExample {
  @State parentValue: number = 0;

  build() {
    Column({ space: 50 }) {
      Text(`父组件的值: ${this.parentValue}`)
        .fontSize(30)
      ChildLinkComponent({ value: $parentValue })
      Button('父组件增加值')
        .onClick(() => {
          this.parentValue++;
        })
    }
    .width('100%')
  }
}

在这个例子中，父组件的parentValue和子组件的value通过@Link双向绑定，无论在父组件还是子组件修改值，双方都会同步更新。

@Provide 和 @Consume

@Provide用于在祖先组件中提供状态，@Consume用于后代组件消费这些状态，以此实现跨组件层级的状态同步。

@Component
struct GrandChildComponent {
  @Consume providedValue: number;

  build() {
    Text(`孙子组件接收到的值: ${this.providedValue}`)
      .fontSize(30)
  }
}

@Component
struct ChildProvideComponent {
  build() {
    GrandChildComponent()
  }
}

@Entry
@Component
struct ProvideConsumeExample {
  @Provide providedValue: number = 100;

  build() {
    Column({ space: 50 }) {
      Text(`祖先组件提供的值: ${this.providedValue}`)
        .fontSize(30)
      Button('更新提供的值')
        .onClick(() => {
          this.providedValue++;
        })
      ChildProvideComponent()
    }
    .width('100%')
  }
}