ArkUI状态管理V2版的变量初始化-优快云博客

本文所有测试代码都是基于API version 17，如下图所示。

ArkUI状态管理V2版的变量初始化_@ComponentV2

一、@Local、@Provider和@Consumer

@Local装饰的变量仅允许本地初始化，无法从外部传入初始化。

@Provider和@Consumer装饰的变量仅允许本地初始化，不允许从外部传入初始化。

二、@Param

@Param装饰的变量允许本地初始化，若无本地初始化则必须从外部传入初始化。当同时存在本地初始值与外部传入值时，优先使用外部传入值进行初始化。

@Param从外部传入初始化时，可以接受任意类型的数据源，包括普通变量、状态变量、常量、函数返回值等。当数据源也是状态变量时，数据源的修改会同步给@Param。

数据源是状态变量的情况如下图所示。

ArkUI状态管理V2版的变量初始化_@ComponentV2_02

1、从父组件 @Local 装饰的变量初始化子组件@Param装饰的变量。

代码：

@Entry
@ComponentV2
struct Index {
  @Local count: number = 0;

  build() {
    Column() {
      Text(`Local ${this.count}`)

        .fontSize(30)

      Button("change Local")
        .onClick(()=>{
          // 对数据源的更改会同步给子组件
          this.count++;
        })

      Child({
        count: this.count
      })
    }
  }
}

@ComponentV2
struct Child {
  @Require @Param count: number;

  build() {
    Column() {
      Text(`Param ${this.count}`)
        .fontSize(30)
    }
  }
}

ArkUI状态管理V2版的变量初始化_@ComponentV2_03

2、从父组件 @Param 装饰的变量初始化子组件@Param装饰的变量。

代码：

@Entry

@ComponentV2
struct Index {
  @Local count: number = 0;

  build() {
    Column() {
      MiddleComponent({ count: this.count })

      Button("change")
        .onClick(() => {
          this.count++;
        })
    }
  }
}

@ComponentV2
struct MiddleComponent {
  @Require @Param count: number;

  build() {
    Column() {
      Text(`MiddleComponent: ${this.count}`)

      SubComponent({ count: this.count })
    }
  }
}

@ComponentV2
struct SubComponent {
  @Require @Param count: number;

  build() {
    Column() {
      Text(`SubComponent: ${this.count}`)
    }
  }
}

ArkUI状态管理V2版的变量初始化_变量初始化_04

3、从父组件 @Provider 装饰的变量初始化子组件@Param装饰的变量。

代码：

@Entry
@ComponentV2struct Index {
  @Provider() val: number = 10;

  build() {
    Column() {
      Button('change')
        .margin(10)
        .onClick(() => {
          this.val++;
        })

      Child({ val: this.val })
    }.width('100%')
  }
}

@ComponentV2struct Child {
  @Param val: number = 0;

  build() {
    Column() {
      Text(`Child @Param val: ${this.val}`).fontSize(30)
    }.border({ width: 2, color: Color.Pink })
  }
}

ArkUI状态管理V2版的变量初始化_@ComponentV2_05

4、从父组件 @Consumer 装饰的变量初始化子组件@Param装饰的变量。

代码：

@Entry
@ComponentV2
struct Index {
  @Consumer() val: number = 10;

  build() {
    Column() {
      Button('change')
        .margin(10)
        .onClick(() => {
          this.val++;
        })
      Child({ val: this.val })
    }.width('100%')
  }
}

@ComponentV2
struct Child {
  @Param val: number = 0;

  build() {
    Column() {
      Text(`Child @Param val: ${this.val}`).fontSize(30)
    }.border({ width: 2, color: Color.Pink })
  }
}

ArkUI状态管理V2版的变量初始化_@ComponentV2_06

5、从父组件 @Computed 装饰的变量初始化子组件@Param装饰的变量。

代码：

@ComponentV2
struct Child {
  @Param sum: number = 100;

  build() {
    Text(`Child: ${this.sum}`)
  }
}

@Entry
@ComponentV2
struct Index {
  @Local a: number = 0;
  @Local b: number = 1;

  @Computed
  get sum() {
    return this.a + this.b;
  }


  build() {
    Scroll() {
      Column({ space: 3 }) {
        Button('click')
          .onClick(() => {
            this.a = 2;
            this.b = 3;
          })

        Text(`Index: ${this.a} + ${this.b} = ${this.sum}`)

        Child({ sum: this.sum })
      }
    }
  }
}