1# \@Require装饰器：校验构造传参 2 3 4\@Require是校验\@Prop、\@State、\@Provide、\@BuilderParam、\@Param和普通变量(无状态装饰器修饰的变量)是否需要构造传参的一个装饰器。 5 6 7> **说明：** 8> 9> 从API version 11开始对\@Prop/\@BuilderParam进行校验。 10> 11> 从API version 11开始，该装饰器支持在原子化服务中使用。 12> 13> 从API version 12开始对\@State/\@Provide/\@Param/普通变量(无状态装饰器修饰的变量)进行校验。 14 15 16## 概述 17 18当\@Require装饰器和\@Prop、\@State、\@Provide、\@BuilderParam、\@Param和普通变量(无状态装饰器修饰的变量)结合使用时，在构造该自定义组件时，\@Prop、\@State、\@Provide、\@BuilderParam、\@Param和普通变量(无状态装饰器修饰的变量)必须在构造时传参。 19 20## 限制条件 21 22\@Require装饰器仅用于装饰struct内的\@Prop、\@State、\@Provide、\@BuilderParam、\@Param和普通变量(无状态装饰器修饰的变量)。 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、\@Param和普通变量(无状态装饰器修饰的变量)结合使用时，父组件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  83 84使用\@ComponentV2修饰的自定义组件ChildPage通过父组件ParentPage进行初始化，因为有\@Require装饰\@Param，所以父组件必须进行构造赋值。 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从API version 16开始，使用\@Require装饰\@State、\@Prop、\@Provide装饰的状态变量，可以在无本地初始值的情况下直接在组件内使用，不会编译报错。 151 152```ts 153@Entry 154@Component 155struct Index { 156 message: string = 'Hello World'; 157 build() { 158 Column() { 159 Child({ message: this.message }) 160 } 161 } 162} 163@Component 164struct Child { 165 @Require @State message: string; 166 build() { 167 Column() { 168 Text(this.message) // 从API version 16开始，可以编译通过 169 } 170 } 171} 172``` 173 174## 错误场景 175 176```ts 177@Entry 178@Component 179struct Index { 180 @State message: string = 'Hello World'; 181 182 @Builder buildTest() { 183 Row() { 184 Text('Hello, world') 185 .fontSize(30) 186 } 187 } 188 189 build() { 190 Row() { 191 Child() 192 } 193 } 194} 195 196@Component 197struct Child { 198 @Builder buildFunction() { 199 Column() { 200 Text('initBuilderParam') 201 .fontSize(30) 202 } 203 } 204 // 使用@Require必须构造时传参。 205 @Require regular_value: string = 'Hello'; 206 @Require @State state_value: string = "Hello"; 207 @Require @Provide provide_value: string = "Hello"; 208 @Require @BuilderParam initBuildTest: () => void = this.buildFunction; 209 @Require @Prop initMessage: string = 'Hello'; 210 211 build() { 212 Column() { 213 Text(this.initMessage) 214 .fontSize(30) 215 this.initBuildTest(); 216 } 217 } 218} 219``` 220 221
