5
5
6
6
## 이벤트 발신 및 수신하기 {#emitting-and-listening-to-events}
7
7
8
- 컴포넌트는 내장 함수 ` $emit ` 을 사용하여 템플릿 표현식(예: ` v-on ` 핸들러에서)에서 직접 사용자 정의 이벤트를 발신할 수 있습니다:
8
+ 컴포넌트는 내장 메서드 ` $emit ` 을 사용하여 템플릿 표현식(예: ` v-on ` 핸들러에서)에서 직접 사용자 정의 이벤트를 발신할 수 있습니다:
9
9
10
10
``` vue-html
11
11
<!-- MyComponent -->
@@ -109,19 +109,30 @@ function increaseCount(n) {
109
109
110
110
<div class =" composition-api " >
111
111
112
+ ``` vue
113
+ <script setup>
114
+ defineEmits(['inFocus', 'submit'])
115
+ </script>
116
+ ```
117
+
118
+ ` <template> ` 에서 사용한 ` $emit ` 메서드는 컴포넌트의 ` <script setup> ` 섹션 내에서 접근할 수 없지만,
119
+ ` defineEmits() ` 는 ` $emit ` 대신에 사용할 수 있는 동등한 함수를 반환합니다.
120
+
112
121
``` vue
113
122
<script setup>
114
123
const emit = defineEmits(['inFocus', 'submit'])
124
+
115
125
function buttonClick() {
116
126
emit('submit')
117
127
}
118
128
</script>
119
129
```
120
130
121
- ` defineEmits() ` 매크로는 함수 안에서 사용될수 ** 없습니다 ** . 반드시 위의 예처럼 ` <script setup> ` 내에 바로 위치해야 합니다.
122
-
131
+ ` defineEmits() ` 매크로는 ** 함수 내에서 사용할 수 없으므로 ** ,
132
+ 위의 예제처럼 ` <script setup> ` 내에 직접 배치해야 합니다.
123
133
124
- ` <script setup> ` 을 사용하지 않는 경우, 이벤트는 [ ` emits ` ] ( /api/options-state.html#emits ) 옵션을 사용하여 선언되어야 하며 ` emit ` 함수는 ` setup() ` 컨텍스트에 노출됩니다:
134
+ ` <script setup> ` 대신 명시적으로 ` setup ` 함수를 사용하는 경우,
135
+ 이벤트는 [ ` emits ` ] ( /api/options-state.html#emits ) 옵션을 사용하여 선언되어야 하며 ` emit ` 함수는 ` setup() ` 컨텍스트에 노출되어야 합니다:
125
136
126
137
``` js
127
138
export default {
@@ -132,6 +143,17 @@ export default {
132
143
}
133
144
```
134
145
146
+ ` setup() ` 컨텍스트의 다른 속성과 마찬가지로 ` emit ` 는 안전하게 분해할당할 수 있습니다:
147
+
148
+ ``` js
149
+ export default {
150
+ emits: [' inFocus' , ' submit' ],
151
+ setup (props , { emit }) {
152
+ emit (' submit' )
153
+ }
154
+ }
155
+ ```
156
+
135
157
</div >
136
158
<div class =" options-api " >
137
159
@@ -143,7 +165,7 @@ export default {
143
165
144
166
145
167
146
- 다른 ` setup() ` 컨텍스트의 속성들 처럼, ` emit ` 역시 구조분해가 가능합니다.
168
+ 다른 ` setup() ` 컨텍스트의 속성들 처럼, ` emit ` 역시 구조분해가 가능합니다.
147
169
148
170
``` js
149
171
export default {
@@ -166,7 +188,7 @@ const emit = defineEmits({
166
188
submit(payload) {
167
189
// `true` 또는 `false` 값을 반환하여
168
190
// 유효성 검사 통과/실패 여부를 알려줌
169
-
191
+
170
192
// 페이로드는 전달되는 인자를 나타내는 것으로
171
193
// `emit('submit', 'a', 'b', 'c')`와 같이 3개의 인자를 전달하는 경우,
172
194
// `submit(pl1, pl2, pl3) { /* 유효성 검사 반환 로직 */ }`과 같이
0 commit comments