[vue] emit
emit
자식컴포넌트에서 데이터가 변경되었을 경우, emit으로 이벤트를 발생시켜 파라미터로 데이터를 전달 할 수 있다.
템플릿에서는 $emit('발신할 이벤트명', 전달파람1, 전달파람2, ...) 이 형태로 사용하고 스크립트에서는 defineEmits()에서 리턴한 emit객체를 변수에 할당하여 사용할 수 있다.
// 자식컴포넌트 TodoItem.vue
<script setup>
import { ref } from 'vue'
const props = defineProps(["todo"]);
const emit = defineEmits(["custom:update"]);
function handleContentKeydown(event) {
props.todo.content = event.target.value; // 객체를 props로 넘기면 주소값 복사이므로 객체 연결이 유지된다. 따라서 자식컴포넌트에서 변경한 값은 그대로 부모도 같이 바라본다. 그러나 이렇게 props를 바로 수정해버리면 리렌더링에 문제가 생긴다. 이럴 땐, 새 객체를 생성해서 넘겨야 한다.
//if (event.key === "Enter") emit("custom:update", event, '1');
if (event.key === "Enter") emit("custom:update", {newContent: event.target.value, seq: props.seq});
}
</script>
<template>
<input
:value="todo.content"
@keydown="handleContentKeydown"
/>
</template>
// 부모컴포넌트 Todo.vue
<script setup>
function update({newChecked, newContent, seq}) {
console.log('자식이 보낸 파라미터: ', {newChecked, newContent, seq})
}
</script>
<template>
<TodoItem v-for="todo in todos" :key="todo.seq"
:todo="todo"
@custom:update="updateContent"
/>
</template>