실전 코드로 배우는 Vue.js

177

CHAPTER 04

컴포넌트 상호작용

그림

4-5

체크박스 토글 이벤트를 디버깅하는 체크박스 토글 이벤트를 디버깅하는

VueVue

데브툴 화면 데브툴 화면

4.34.3

defineEmitsdefineEmits

()를 이용한 커스텀 이벤트 정의()를 이용한 커스텀 이벤트 정의

4

.

1

.

4

절에서 배운

props

정의와 비슷한 방식으로, 커스텀 이벤트는

<

script

setup

>

코드

블록에서

defineEmits

()

로 정의한다.

defineEmits

()

함수의 입력 파라미터 타입은 앞서

배웠던

emits

와 동일하다.

const emits = defineEmits(['component-event'])

defineEmits

()

가 반환하는 함수 인스턴스를 통해 다음과 같이 특정 이벤트를 호출할 수

있다.

emits('component-event', [...arguments])

[예제

4

-

21

]는 이벤트를 정의한

ToDoItem

의 스크립트 섹션이다.

예제

4-21

defineEmits

()

로 커스텀 이벤트를 정의한

ToDoItem

컴포넌트

<script lang="ts" setup>

//...

178

실전 코드로 배우는 Vue.js

const props = defineProps({

task: {

type: Object as PropType<Task>,

required: ...