[Vue.js] tutorial - 13. Emits

📍emit()

- 자식 컴포넌트는 부모 컴포넌트로부터 props를 받지만,

- 부모 컴포넌트에 event를 방출할 수도 있다

<script setup>
// declare emitted events
const emit = defineEmits(['response', 'delete']) // 여러 이벤트 선언 가능

// emit with argument
emit('response', 'hello from child')
</script>

- emit()의 1번째 인자로 이벤트 이름을 전달

- 부모 컴포넌트는 자식 컴포넌트에서 방출된 이벤트를 v-on directive를 통해서 전달받음

- 이벤트 핸들러는 여러 인자를 받고 부모 컴포넌트의 로컬 상태로 할당 가능

<ChildComp @response="(msg) => childMsg = msg" />

- <template> 내부에서는 ref값 참조 시 .value 안 붙임에 주의

 

정리

- props: 부모 -> 자식 데이터 전달

- emit: 자식 -> 부모 데이터 전달