자식이 부모에 변경 의도를 사용자 정의 이벤트로 알립니다.
defineEmits는 자식이 발생시키는 사건의 이름과 payload 계약을 선언합니다. 부모는 @이벤트로 받아 상태 소유권을 유지합니다.
update, submit처럼 무슨 일이 일어났는지 나타내고 부모 구현을 지시하는 이름은 피합니다.
payload는 필요한 최소 데이터로 유지하고 원본 객체를 자식이 변경하지 않습니다.
emit과 props 직접 변경을 함께 사용하면 변경 출처가 둘이 됩니다.
로컬 프로젝트에서 확인해보세요reset 사건과 버튼을 추가하세요.
<script setup>
import { ref } from "vue";
const count = ref(0);
const emit = defineEmits(["changed"]);
function increase() {
count.value++;
emit("changed", count.value);
}
</script>
<template>
<main>
<button @click="increase">증가</button>
<p>{{ count }}</p>
<small>changed 사건 payload도 개발자 도구에서 확인할 수 있습니다.</small>
</main>
</template>