[Vue.js] $emit은 무엇이고 어떻게 사용하는가?

$emit 이란?

$emit은 자식 컴포넌트가 부모 컴포넌트에게 데이터를 전달할때 사용하는 메소드이다.

부모 -> 자식으로 데이터 전달 할때는 props를 사용하지만, 그 반대인경우는 $emit을 사용한다.

사용 방법은?

1. 우선, 자식이 부모에게 알려야 할일이 있는지 생각해본다.
   버튼을 클릭했다거나, 값을 입력 완료했다거나, 선택을 완료 했다거나.
2. 자식에서 이벤트를 정의하고 $emit 을 사용해 보낸다.
   이벤트 이름 , 예를 들어 send-message 라는 이벤트를 정한다.
   필요하다면, 데이터를 같이 보낸다. 여기서는 'hello from child'라는 메시지를 같이 보낸다.
3. 부모 컴포넌트에서 자식을 사용할 때 이벤트를 listen 하도록 한다.
   인라인 핸들러로 처리하거나 메소드를 만들어 처리한다.
   예제에서는 메소드를 만들어 처리했다.

Parent Component

<template>
<div> 
<ChildComponent @send-message = "handleMessage" /> // send-message라는 이벤트를 듣고 있다가, handleMessage 메서드로 처리함
</div>

<template>

Child Component

<template> // click 할때 notifyParent라는 메서드를 실행한다
    <button @click = "notifyParent"> click (method handler test) </button>
<template/>

<script>
export default {
    methods : {
        notifyParent() { // notifyParent는 send-message라는 이벤트를 듣는다. 
            this.$emit('send-message', 'Hello from child'!);
        }
    }
}

</script>

send-message는 원래 있는 이벤트인가?

send-message는 본래 있는 이벤트가 아니라, 사용자 정의 이벤트이다.

예제에서 자식이 부모에게 알릴 수단이 필요하기 때문에 알린다는 행위를 send-message 라는 이벤트로 정의한것이다.

이벤트는 "나 여기서 어떤 일이 일어났어" 하고 부모에게 알리는 방법이다.

정리

부모 → 자식 : props로 보낸다 (이미 정해진 방식).

자식 → 부모 : 커스텀 이벤트($emit)로 보낸다 (이때 이벤트 이름을 사용자가 정의한다).