harmony(鸿蒙)Initialization of Custom Components’ Member Variables
Initialization of Custom Components’ Member Variables
The member variables of a component can be initialized in either of the following ways:
- Local initialization. For example:
@State counter: Counter = new Counter()
- Initialization using constructor parameters. For example:
MyComponent({counter: $myCounter})
The allowed method depends on the decorator of the state variable, as shown in the following table.
Decorator Type | Local Initialization | Initialization Using Constructor Parameters |
---|---|---|
@State | Mandatory | Optional |
@Prop | Forbidden | Mandatory |
@Link | Forbidden | Mandatory |
@StorageLink | Mandatory | Forbidden |
@StorageProp | Mandatory | Forbidden |
@Provide | Mandatory | Optional |
@Consume | Forbidden | Forbidden |
@ObjectLink | Forbidden | Mandatory |
Normal member variable | Recommended | Optional |
As indicated by the preceding table:
The @State decorated variables need to be initialized locally. The initial value can be overwritten by the constructor parameter.
The @Prop and @Link decorated variables must be initialized only by constructor parameters.
Comply with the following rules when using constructors to initialize member variables:
From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) | @State | @Link | @Prop | Normal Variable |
---|---|---|---|---|
@State | Not allowed | Allowed | Allowed | Allowed |
@Link | Not allowed | Allowed | Not recommended | Allowed |
@Prop | Not allowed | Not allowed | Allowed | Allowed |
@StorageLink | Not allowed | Allowed | Not allowed | Allowed |
@StorageProp | Not allowed | Not allowed | Not allowed | Allowed |
Normal variable | Allowed | Not allowed | Not allowed | Allowed |
As indicated by the preceding table:
The normal variables of the parent component can be used to initialize the @State decorated variables of the child component, but not the @Link or @Prop decorated variables.
The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using $), or normal variables of the child component, but not the @State decorated variables of the child component.
The @Link decorated variables of the parent component can be used to initialize the @Link decorated or normal variables of the child component. However, initializing the @State decorated members of the child component can result in a syntax error. In addition, initializing the @Prop decorated variables is not recommended.
The @Prop decorated variables of the parent component can be used to initialize the normal variables or @Prop decorated variables of the child component, but not the @State or @Link decorated variables.
Passing @StorageLink and @StorageProp from the parent component to the child component is prohibited.
In addition to the preceding rules, the TypeScript strong type rules need to be followed.
Example
// 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)
}
}
你可能感兴趣的鸿蒙文章
harmony(鸿蒙)Multi-Language Capability
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦