• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Initialization of Custom Components' Member Variables
2
3
4The member variables of a component can be initialized in either of the following ways:
5
6
7- Local initialization. For example:
8
9  ```
10  @State counter: Counter = new Counter()
11  ```
12
13- Initialization using constructor parameters. For example:
14
15  ```
16  MyComponent({counter: $myCounter})
17  ```
18
19
20The allowed method depends on the decorator of the state variable, as shown in the following table.
21
22
23| Decorator Type | Local Initialization | Initialization Using Constructor Parameters |
24| -------- | -------- | -------- |
25| @State | Mandatory | Optional |
26| @Prop | Forbidden | Mandatory |
27| @Link | Forbidden | Mandatory |
28| @StorageLink | Mandatory | Forbidden |
29| @StorageProp | Mandatory | Forbidden |
30| @Provide | Mandatory | Optional |
31| @Consume | Forbidden | Forbidden |
32| @ObjectLink | Forbidden | Mandatory |
33| Normal member variable | Recommended | Optional |
34
35
36As indicated by the preceding table:
37
38
39- The @State decorated variables need to be initialized locally. The initial value can be overwritten by the constructor parameter.
40
41- The @Prop and @Link decorated variables must be initialized only by constructor parameters.
42
43
44Comply with the following rules when using constructors to initialize member variables:
45
46
47| From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) | @State | @Link | @Prop | Normal Variable |
48| -------- | -------- | -------- | -------- | -------- |
49| @State | Not allowed | Allowed | Allowed | Allowed |
50| @Link | Not allowed | Allowed | Not recommended | Allowed |
51| @Prop | Not allowed | Not allowed | Allowed | Allowed |
52| @StorageLink | Not allowed | Allowed | Not allowed | Allowed |
53| @StorageProp | Not allowed | Not allowed | Not allowed | Allowed |
54| Normal variable | Allowed | Not allowed | Not allowed | Allowed |
55
56
57As indicated by the preceding table:
58
59
60- 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.
61
62- 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.
63
64- 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.
65
66- 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.
67
68- Passing @StorageLink and @StorageProp from the parent component to the child component is prohibited.
69
70- In addition to the preceding rules, the TypeScript strong type rules need to be followed.
71
72
73## Example
74
75
76```
77@Entry
78@Component
79struct Parent {
80    @State parentState: ClassA = new ClassA()
81    build() {
82        Row() {
83            CompA({aState: new ClassA, aLink: $parentState}) // valid
84            CompA({aLink: $parentState})   // valid
85            CompA()                 // invalid, @Link aLink remains uninitialized
86            CompA({aLink: new ClassA}) // invalid, @Link aLink must be a reference ($) to either @State or @Link variable
87        }
88    }
89}
90
91@Component
92struct CompA {
93    @State aState: boolean = false   // must initialize locally
94    @Link aLink: ClassA              // must not initialize locally
95
96    build() {
97        Row() {
98            CompB({bLink: $aLink,         // valid init a @Link with reference of another @Link,
99                bProp: this.aState})    // valid init a @Prop with value of a @State
100            CompB({aLink: $aState,  // invalid: type mismatch expected ref to ClassA, provided reference to boolean
101                bProp: false})           // valid init a @Prop by constants value
102        }
103    }
104}
105
106@Component
107struct CompB {
108    @Link bLink: ClassA = new ClassA()       // invalid, must not initialize locally
109    @Prop bProp: boolean = false      // invalid must not initialize locally
110
111    build() {
112        ...
113    }
114}
115```
116