开源鸿蒙 自定义组件成员变量初始化

2022-08-09 浏览 (1228)

自定义组件成员变量初始化

组件的成员变量可以通过两种方式初始化:

  • 本地初始化,例如:

    @State counter: Counter = new Counter()
    
  • 在构造组件时通过构造参数初始化,例如:

    MyComponent({counter: $myCounter})
    

具体允许哪种方式取决于状态变量的装饰器:

装饰器类型本地初始化通过构造函数参数初始化
@State必须可选
@Prop禁止必须
@Link禁止必须
@StorageLink必须禁止
@StorageProp必须禁止
@Provide必须可选
@Consume禁止禁止
@ObjectLink禁止必须
常规成员变量推荐可选

从上表中可以看出:

  • @State变量需要本地初始化,初始化的值可以被构造参数覆盖;

  • @Prop和@Link变量必须且仅通过构造函数参数进行初始化。

通过构造函数方法初始化成员变量,需要遵循如下规则:

从父组件中的变量(下)到子组件中的变量(右)@State@Link@Prop常规变量
@State不允许允许允许允许
@Link不允许允许不推荐允许
@Prop不允许不允许允许允许
@StorageLink不允许允许不允许允许
@StorageProp不允许不允许不允许允许
常规变量允许不允许不允许允许

从上表中可以看出:

  • 父组件的常规变量可以用于初始化子组件的@State变量,但不能用于初始化@Link或@Prop变量。

  • 父组件的@State变量可以初始化子组件的@Prop、@Link(通过$)或常规变量,但不能初始化子组件的@State变量。

  • 父组件的@Link变量可以初始化子组件的@Link或常规变量。但是初始化子组件的@State成员是语法错误,此外不建议初始化@prop。

  • 父组件的@Prop变量可以初始化子组件的常规变量或@Prop变量,但不能初始化子组件的@State或@Link变量。

  • @StorageLink和@StorageProp不允许由父组件中传递到子组件。

  • 除了上述规则外,还需要遵循TS的强类型规则。

示例

// xxx.ets
class ClassA {
  public a:number
  constructor(a: number) {
    this.a = a
  }
}
@Entry
@Component
struct Parent {
  @State parentState: ClassA = new ClassA(1)
  
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aState: new ClassA(2), aLink: $parentState })
      }
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aLink: $parentState })
      }
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aState: new ClassA(3), aLink: $parentState })
      }
    }
  }
}

@Component
struct CompA {
  @State aState: any = false
  @Link aLink: ClassA
  
  build() {
    Column() {
      CompB({ bLink: $aLink, bProp: this.aState })
      CompB({ bLink: $aState, bProp: false })
    }
  }
}

@Component
struct CompB {
  @Link bLink: ClassA
  @Prop bProp: boolean
  
  build() {
    Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
      Text(JSON.stringify(this.bLink.a)).fontSize(30)
      Text(JSON.stringify(this.bProp)).fontSize(30).fontColor(Color.Red)
     }.margin(10)
  }
}

你可能感兴趣的文章

开源鸿蒙 UI开发

开源鸿蒙 方舟开发框架概述

开源鸿蒙 文件组织

开源鸿蒙 app.js

开源鸿蒙 js标签配置

开源鸿蒙 生命周期

开源鸿蒙 多语言支持

开源鸿蒙 资源限定与访问

开源鸿蒙 CSS语法参考

开源鸿蒙 HML语法参考

  • 所属分类: 后端技术
  • 本文标签: 软件 鸿蒙
  • 版权声明: 本文链接 https://seaxiang.com/blog/fdd7d242b67647468754d7d70dd84c18