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