[Composition API] Vue3 Emit 사용하기(script setup)

1. 사용 배경

Emit는 하위 컴포넌트(자식)에서 상위 컴포넌트(부모)로 이벤트로 데이터를 넘겨줄 경우 사용합니다.

2. 파일 구조

프로젝트 파일 구조

독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다.

3. 구현 과정

(App.vue와 main.js 파일은 전혀 손대지 않았습니다.)

자식 컴포넌트인 HelloWorld.vue 파일부터 보겠습니다.

자식 컴포넌트

//HelloWorld.vue

<template>
  <div class="hello">
    <button @click="buttonClick">Submit</button>
  </div>
</template>

<script setup>
import { defineEmits } from "vue";

const emit = defineEmits(["submit"]);

function buttonClick() {
  emit("submit", "data");
}
</script>

버튼을 클릭하면 "data"가 이벤트로 전달되는 로직입니다.

페이지 화면

페이지에 Submit 버튼을 누르면 부모 컴포넌트로 데이터가 넘어갑니다.

부모 컴포넌트

//HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld @submit="emitTest" />
  </div>
</template>

<script setup>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

function emitTest(data) {
  console.log(data);
}
</script>

<HelloWorld @submit="emitTest" />

@submit을 통해 하위 컴포넌트에서 넘어오는 데이터를 받아 emitTest 함수의 파라미터 값으로 전달합니다.

function emitTest(data) {
  console.log(data);
}

결과가 아래와 같이 나오면 성공입니다!

console.log 결과

4. 결론

가장 간단한 예제로 Emit을 구현해 봤습니다.

Vue에는 Vuex라는 상태관리 라이브러리가 존재하지만, 프로젝트의 구조에 따라 Emit을 사용해야 하는 경우가 생깁니다.

어느 정도 Emit에 대한 개념이 잡히셨다면 아래의 공식 문서에서 심화 예제로 공부해보시는 것을 추천드립니다!

https://vuejs.org/guide/components/events.html