开源鸿蒙 自定义组件成员变量初始化
自定义组件成员变量初始化
组件的成员变量可以通过两种方式初始化:
本地初始化,例如:
@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)
}
}
你可能感兴趣的文章
0
赞
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦