1# \@Require装饰器：校验构造传参
2
3
4\@Require是校验\@Prop、\@State、\@Provide、\@BuilderParam和普通变量(无状态装饰器修饰的变量)是否需要构造传参的一个装饰器。
5
6
7> **说明：**
8>
9> 从API version 11开始对\@Prop/\@BuilderParam进行校验。
10>
11> 从API version 12开始对\@State/\@Provide/普通变量(无状态装饰器修饰的变量)进行校验。
12> 从API version 11开始，该装饰器支持在原子化服务中使用。
13
14
15## 概述
16
17当\@Require装饰器和\@Prop、\@State、\@Provide、\@BuilderParam、普通变量(无状态装饰器修饰的变量)结合使用时，在构造该自定义组件时，\@Prop、\@State、\@Provide、\@BuilderParam和普通变量(无状态装饰器修饰的变量)必须在构造时传参。
18
19## 限制条件
20
21\@Require装饰器仅用于装饰struct内的\@Prop、\@State、\@Provide、\@BuilderParam和普通变量(无状态装饰器修饰的变量)。
22
23预览器限制场景请参考[PreviewChecker检测规则](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-previewer-previewchecker-V5)。
24
25## 使用场景
26
27当Child组件内使用\@Require装饰器和\@Prop、\@State、\@Provide、\@BuilderParam和普通变量(无状态装饰器修饰的变量)结合使用时，父组件Index在构造Child时必须传参，否则编译不通过。
28
29```ts
30@Entry
31@Component
32struct Index {
33  @State message: string = 'Hello World';
34
35  @Builder buildTest() {
36    Row() {
37      Text('Hello, world')
38        .fontSize(30)
39    }
40  }
41
42  build() {
43    Row() {
44      Child({ regular_value: this.message, state_value: this.message, provide_value: this.message, initMessage: this.message, message: this.message,
45        buildTest: this.buildTest, initBuildTest: this.buildTest })
46    }
47  }
48}
49
50@Component
51struct Child {
52  @Builder buildFunction() {
53    Column() {
54      Text('initBuilderParam')
55        .fontSize(30)
56    }
57  }
58  @Require regular_value: string = 'Hello';
59  @Require @State state_value: string = "Hello";
60  @Require @Provide provide_value: string = "Hello";
61  @Require @BuilderParam buildTest: () => void;
62  @Require @BuilderParam initBuildTest: () => void = this.buildFunction;
63  @Require @Prop initMessage: string = 'Hello';
64  @Require @Prop message: string;
65
66  build() {
67    Column() {
68      Text(this.initMessage)
69        .fontSize(30)
70      Text(this.message)
71        .fontSize(30)
72      this.initBuildTest();
73      this.buildTest();
74    }
75    .width('100%')
76    .height('100%')
77  }
78}
79```
80
81 ![img](figures/9e2d58bc-b0e1-4613-934b-8e4237bd5c05.png) 
82
83使用@ComponentV2修饰的自定义组组件ChildPage通过父组件ParentPage进行初始化，因为有@Require装饰，所以父组件必须进行构造赋值。
84
85```ts
86@ObservedV2
87class Info {
88  @Trace name: string = '';
89  @Trace age: number = 0;
90}
91
92@ComponentV2
93struct ChildPage {
94  @Require @Param childInfo: Info = new Info();
95  @Require @Param state_value: string = "Hello";
96  build() {
97    Column() {
98      Text(`ChildPage childInfo name :${this.childInfo.name}`)
99        .fontSize(20)
100        .fontWeight(FontWeight.Bold)
101      Text(`ChildPage childInfo age :${this.childInfo.age}`)
102        .fontSize(20)
103        .fontWeight(FontWeight.Bold)
104      Text(`ChildPage state_value age :${this.state_value}`)
105        .fontSize(20)
106        .fontWeight(FontWeight.Bold)
107    }
108  }
109}
110
111@Entry
112@ComponentV2
113struct ParentPage {
114  info1: Info = { name: "Tom", age: 25 };
115  label1: string = "Hello World";
116  @Local info2: Info = { name: "Tom", age: 25 };
117  @Local label2: string = "Hello World";
118
119  build() {
120    Column() {
121      Text(`info1: ${this.info1.name}  ${this.info1.age}`) // Text1
122        .fontSize(30)
123        .fontWeight(FontWeight.Bold)
124      ChildPage({ childInfo: this.info1, state_value: this.label1}) // 调用自定义组件
125      Line()
126        .width('100%')
127        .height(5)
128        .backgroundColor('#000000').margin(10)
129      Text(`info2: ${this.info2.name}  ${this.info2.age}`) // Text2
130        .fontSize(30)
131        .fontWeight(FontWeight.Bold)
132      ChildPage({ childInfo: this.info2, state_value: this.label2}) // 调用自定义组件
133      Line()
134        .width('100%')
135        .height(5)
136        .backgroundColor('#000000').margin(10)
137      Button("change info1&info2")
138        .onClick(() => {
139          this.info1 = { name: "Cat", age: 18} // Text1不会刷新，原因是没有装饰器修饰监听不到值的改变。
140          this.info2 = { name: "Cat", age: 18} // Text2会刷新，原因是有装饰器修饰，可以监听到值的改变。
141          this.label1 = "Luck"; // 不会刷新，原因是没有装饰器修饰监听不到值的改变。
142          this.label2 = "Luck"; // 会刷新，原因是有装饰器修饰，可以监听到值的改变。
143        })
144    }
145  }
146}
147```
148
149## 错误场景
150
151```ts
152@Entry
153@Component
154struct Index {
155  @State message: string = 'Hello World';
156
157  @Builder buildTest() {
158    Row() {
159      Text('Hello, world')
160        .fontSize(30)
161    }
162  }
163
164  build() {
165    Row() {
166      Child()
167    }
168  }
169}
170
171@Component
172struct Child {
173  @Builder buildFunction() {
174    Column() {
175      Text('initBuilderParam')
176        .fontSize(30)
177    }
178  }
179  // 使用@Require必须构造时传参。
180  @Require regular_value: string = 'Hello';
181  @Require @State state_value: string = "Hello";
182  @Require @Provide provide_value: string = "Hello";
183  @Require @BuilderParam initBuildTest: () => void = this.buildFunction;
184  @Require @Prop initMessage: string = 'Hello';
185
186  build() {
187    Column() {
188      Text(this.initMessage)
189        .fontSize(30)
190      this.initBuildTest();
191    }
192  }
193}
194```
195
196