1# \@Event装饰器：规范组件输出
2
3为了实现子组件向父组件要求更新\@Param装饰变量的能力，开发者可以使用\@Event装饰器。使用\@Event装饰回调方法是一种规范，表明子组件需要传入更新数据源的回调。
4
5
6\@Event主要配合\@Param实现数据的双向同步。在阅读本文档前，建议提前阅读：[\@Param](./arkts-new-param.md)。
7
8>**说明：**
9>
10>从API version 12开始，在\@ComponentV2装饰的自定义组件中支持使用\@Event装饰器。
11>
12
13## 概述
14
15由于\@Param装饰的变量在本地无法更改，使用\@Event装饰器装饰回调方法并调用，可以实现更改数据源的变量，再通过\@Local的同步机制，将修改同步回\@Param，以此达到主动更新\@Param装饰变量的效果。
16
17\@Event用于装饰组件对外输出的方法：
18
19- \@Event装饰的回调方法中参数以及返回值由开发者决定。
20
21- \@Event装饰非回调类型的变量不会生效。当\@Event没有初始化时，会自动生成一个空的函数作为默认回调。
22- 当\@Event未被外部初始化，但本地有默认值时，会使用本地默认的函数进行处理。
23
24\@Param标志着组件的输入，表明该变量受父组件影响，而\@Event标志着组件的输出，可以通过该方法影响父组件。使用\@Event装饰回调方法是一种规范，表明该回调作为自定义组件的输出。父组件需要判断是否提供对应方法用于子组件更改\@Param变量的数据源。
25
26## 装饰器说明
27
28| \@Event属性装饰器 | 说明 |
29| ------------------- | ------------------------------------------------------------ |
30| 装饰器参数 | 无。 |
31| 允许装饰的变量类型 | 回调方法，例如()=>void、(x:number)=>boolean等。回调方法是否含有参数以及返回值由开发者决定。 |
32| 允许传入的函数类型 | 箭头函数。 |
33
34## 限制条件
35
36- \@Event只能用在\@ComponentV2装饰的自定义组件中。当装饰非方法类型的变量时，不会有任何作用。
37
38  ```ts
39  @ComponentV2
40  struct Index {
41    @Event changeFactory: ()=>void = ()=>{}; //正确用法
42    @Event message: string = "abcd"; // 错误用法，装饰非方法类型变量，@Event无作用
43  }
44  @Component
45  struct Index {
46    @Event changeFactory: ()=>void = ()=>{}; // 错误用法，编译时报错
47  }
48  ```
49
50
51## 使用场景
52
53### 更改父组件中变量
54
55使用\@Event可以更改父组件中变量，当该变量作为子组件\@Param变量的数据源时，该变化会同步回子组件的\@Param变量。
56
57```ts
58@Entry
59@ComponentV2
60struct Index {
61  @Local title: string = "Title One";
62  @Local fontColor: Color = Color.Red;
63
64  build() {
65    Column() {
66      Child({
67        title: this.title,
68        fontColor: this.fontColor,
69        changeFactory: (type: number) => {
70          if (type == 1) {
71            this.title = "Title One";
72            this.fontColor = Color.Red;
73          } else if (type == 2) {
74            this.title = "Title Two";
75            this.fontColor = Color.Green;
76          }
77        }
78      })
79    }
80  }
81}
82
83@ComponentV2
84struct Child {
85  @Param title: string = '';
86  @Param fontColor: Color = Color.Black;
87  @Event changeFactory: (x: number) => void = (x: number) => {};
88
89  build() {
90    Column() {
91      Text(`${this.title}`)
92        .fontColor(this.fontColor)
93      Button("change to Title Two")
94        .onClick(() => {
95          this.changeFactory(2);
96        })
97      Button("change to Title One")
98        .onClick(() => {
99          this.changeFactory(1);
100        })
101    }
102  }
103}
104```
105
106值得注意的是，使用\@Event修改父组件的值是立刻生效的，但从父组件将变化同步回子组件的过程是异步的，即在调用完\@Event的方法后，子组件内的值不会立刻变化。这是因为\@Event将子组件值实际的变化能力交由父组件处理，在父组件实际决定如何处理后，将最终值在渲染之前同步回子组件。
107
108```ts
109@ComponentV2
110struct Child {
111  @Param index: number = 0;
112  @Event changeIndex: (val: number) => void;
113
114  build() {
115    Column() {
116      Text(`Child index: ${this.index}`)
117        .onClick(() => {
118          this.changeIndex(20);
119          console.log(`after changeIndex ${this.index}`);
120        })
121    }
122  }
123}
124@Entry
125@ComponentV2
126struct Index {
127  @Local index: number = 0;
128
129  build() {
130  	Column() {
131  	  Child({
132  	    index: this.index,
133  	    changeIndex: (val: number) => {
134  	      this.index = val;
135          console.log(`in changeIndex ${this.index}`);
136  	    }
137  	  })
138  	}
139  }
140}
141```
142
143在上面的示例中，点击文字触发\@Event函数事件改变子组件的值，打印出的日志为：
144
145```
146in changeIndex 20
147after changeIndex 0
148```
149
150这表明在调用changeIndex之后，父组件中index的值已经变化，但子组件中的index值还没有同步变化。