자식 컴포넌트에서도 데이터 전달의 목적이나 이벤트 발생 등의 이유로 부모 컴포넌트로 이벤트를 전달 할 수 있다.
emit 은 자식 컴포넌트가 부모 컴포넌트에게 이벤트를 전달하는 방법을 의미하며, 이를 통해 부모가 자식의 상태 변화를 감지할 수 있다.
사용
PostCreate.vue ( 자식 )<button @click="$emit('createPost', 1, 2, 3, '네번째')" >button</button>
HTML
복사
TheView.vue ( 부모 )<template>
<PostCreate @create-post="createPost"></PostCreate>
</template>
<script setup>
import PostCreate from '@/components/PostCreate.vue';
const createPost = (a, b, c, d) => {
console.log(a);
console.log(b);
console.log(c);
console.log(d);
};
</script>
HTML
복사
결과
자식 컴포넌트에서 emit 을 사용하는 방법은 위의 방법 이외에도 아래와 같이 여러 방법이 있다.
<template>
<button @click="createPost">button</button>
</template>
<script setup>
const emit = defineEmits('');
const createPost = () => {
emit('createPost', 1, 2, 3, '네번째');
};
</script>
HTML
복사
유효성 체크
위의 코드에서 const emit = defineEmits(''); 로 선언만 해서 사용했는데 이 부분에 유효성 체크를 추가할 수 있다.
<template>
<input type="text" v-model="title" />
</template>
HTML
복사
<script setup>
import { ref } from 'vue';
const title = ref('');
const emit = defineEmits({
// 유효성 검사가 없다면 null로 선언
createPost: null
// 유효성 검사가 있다면 검사할 값(title)에 대한 함수 작성
createPost: title => {
// 유효성 체크에 걸려도 이벤트가 발생이 되긴 된다. 경고 표시만 나옴
if (!title.value) {
console.log('제목을 입력해주세요');
return false;
}
return true;
},
});
const createPost = () => {
emit('createPost', title);
};
</script>
HTML
복사
유효성 검사 는 작성하지 않아도 정상적으로 emit 이 동작하는 데에는 문제가 없지만 함수의 동작 방식을 더 잘 문서화하기 위해서 모든 이벤트를 정의하는 것이 좋다.
이벤트 이름 관련 공식 문서 참고
