Skip to content

Commit bf3bcc1

Browse files
committed
Official sync translation: /guide/components/events.md
- #1764, #1756(none)
1 parent 4734227 commit bf3bcc1

File tree

1 file changed

+28
-6
lines changed

1 file changed

+28
-6
lines changed

ko-KR/src/guide/components/events.md

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
## 이벤트 발신 및 수신하기 {#emitting-and-listening-to-events}
77

8-
컴포넌트는 내장 함수 `$emit`을 사용하여 템플릿 표현식(예: `v-on` 핸들러에서)에서 직접 사용자 정의 이벤트를 발신할 수 있습니다:
8+
컴포넌트는 내장 메서드 `$emit`을 사용하여 템플릿 표현식(예: `v-on` 핸들러에서)에서 직접 사용자 정의 이벤트를 발신할 수 있습니다:
99

1010
```vue-html
1111
<!-- MyComponent -->
@@ -109,19 +109,30 @@ function increaseCount(n) {
109109

110110
<div class="composition-api">
111111

112+
```vue
113+
<script setup>
114+
defineEmits(['inFocus', 'submit'])
115+
</script>
116+
```
117+
118+
`<template>`에서 사용한 `$emit` 메서드는 컴포넌트의 `<script setup>` 섹션 내에서 접근할 수 없지만,
119+
`defineEmits()``$emit` 대신에 사용할 수 있는 동등한 함수를 반환합니다.
120+
112121
```vue
113122
<script setup>
114123
const emit = defineEmits(['inFocus', 'submit'])
124+
115125
function buttonClick() {
116126
emit('submit')
117127
}
118128
</script>
119129
```
120130

121-
`defineEmits()` 매크로는 함수 안에서 사용될수 **없습니다**. 반드시 위의 예처럼 `<script setup>` 내에 바로 위치해야 합니다.
122-
131+
`defineEmits()` 매크로는 **함수 내에서 사용할 수 없으므로**,
132+
위의 예제처럼 `<script setup>` 내에 직접 배치해야 합니다.
123133

124-
`<script setup>`을 사용하지 않는 경우, 이벤트는 [`emits`](/api/options-state.html#emits) 옵션을 사용하여 선언되어야 하며 `emit` 함수는 `setup()` 컨텍스트에 노출됩니다:
134+
`<script setup>` 대신 명시적으로 `setup` 함수를 사용하는 경우,
135+
이벤트는 [`emits`](/api/options-state.html#emits) 옵션을 사용하여 선언되어야 하며 `emit` 함수는 `setup()` 컨텍스트에 노출되어야 합니다:
125136

126137
```js
127138
export default {
@@ -132,6 +143,17 @@ export default {
132143
}
133144
```
134145

146+
`setup()` 컨텍스트의 다른 속성과 마찬가지로 `emit`는 안전하게 분해할당할 수 있습니다:
147+
148+
```js
149+
export default {
150+
emits: ['inFocus', 'submit'],
151+
setup(props, { emit }) {
152+
emit('submit')
153+
}
154+
}
155+
```
156+
135157
</div>
136158
<div class="options-api">
137159

@@ -143,7 +165,7 @@ export default {
143165

144166

145167

146-
다른 `setup()` 컨텍스트의 속성들 처럼, `emit` 역시 구조분해가 가능합니다.
168+
다른 `setup()` 컨텍스트의 속성들 처럼, `emit` 역시 구조분해가 가능합니다.
147169

148170
```js
149171
export default {
@@ -166,7 +188,7 @@ const emit = defineEmits({
166188
submit(payload) {
167189
// `true` 또는 `false` 값을 반환하여
168190
// 유효성 검사 통과/실패 여부를 알려줌
169-
191+
170192
// 페이로드는 전달되는 인자를 나타내는 것으로
171193
// `emit('submit', 'a', 'b', 'c')`와 같이 3개의 인자를 전달하는 경우,
172194
// `submit(pl1, pl2, pl3) { /* 유효성 검사 반환 로직 */ }`과 같이

0 commit comments

Comments
 (0)