Vue: emit() 함수

Vue.js에서 emit 이란?

• emit(영어: 방출하다)은 Vue.js에서 자식 컴포넌트(child)가 부모 컴포넌트(parent)로 데이터를 전달하거나, 어떤 '이벤트'가 발생했다는 신호를 보낼 때 사용하는 Vue의 빌트인 함수($emit)입니다.

  • 즉, 아래처럼 아래 방향(부모 → 자식)은 props를, 반대 방향(자식 → 부모)은 $emit을 사용합니다.

1. 기본 동작 구조

@startuml
node ParentComponent {
}
node ChildComponent {
}
ChildComponent -> ParentComponent: $emit('event명', 인자1, 인자2, ...)
@enduml
                                           

• 첫 번째 인자 : event 이름(부모에서 사용할 이벤트 핸들러 이름)

• 두 번째 이후 인자 : 부모로 보낼 데이터 (가변 매개변수)

2. 기본 사용법 예제

ChildComponent.vue

<template>
  <button @click="clickOnChild">click on child</button>
</template>

<script>
export default{
  setup(props, ctx){
    const clickOnChild = ()=>{
      // 부모로 'eventFromChild' 이벤트를 발생시키며 'child msg'를 함께 전달
      ctx.emit('eventFromChild', 'child msg');
    };
    return { clickOnChild }
  }
}
</script>

ParentComponent.vue

<template>
  parent에서의 값 : {{data}}
  <ChildComponent @event-from-child="change"/>
</template>
<script setup>
import {ref} from 'vue'
import ChildComponent from './ChildComponent.vue'

const data = ref('');
const change = (msg) => {
  data.value = msg;
};
</script>

→ 버튼 클릭 시, 자식이 이벤트 발생(emit), 부모는 핸들러로 받아 처리

3. $emit의 여러 인자 전달

ctx.emit('eventFromChild', 'msg1', 'msg2', 'msg3');
// 부모 핸들러 fun(msg1, msg2, msg3)로 다 받을 수 있음

4. 여러 이벤트를 한 번에 emit

ctx.emit('event1', 'msg1');
ctx.emit('event2', 'msg2');
ctx.emit('event3', 'msg3');

부모에서는 각각 이벤트명으로 받아서 데이터를 다룰 수 있습니다.

5. <script setup>에서의 defineEmits

Vue 3의 <script setup> 문법에선 내장 API인 defineEmits를 통해 자식 컴포넌트 내에서 emit 가능한 이벤트명을 명확하게 선언(타입까지 지정 가능)할 수 있습니다.

• 예시

<script setup>
const emit = defineEmits(['customEvent']) // 이벤트 이름 배열로 선언 가능

function onClick() {
  emit('customEvent', 'data')
}
</script>

• 기존의 ctx.emit('~') 대신 사용할 수 있고, 타입스크립트 사용 시 더욱 안전한 코드를 작성할 수 있습니다.

참고

• $emit은 특정 이벤트(또는 데이터)를 자식 → 부모 방향으로 전달하는 방식입니다.

• 인자 여러 개 가능, 이벤트 여러 개도 연달아 emit 가능

• Vue 3 script setup에서는 defineEmits를 권장