Emit 사용 방법

emit는 컴포넌트에서 발생한 이벤트를 상위 부모에게 전달하는 키워드입니다. 다음과 같이 script 코드에서 이벤트를 발생하는 방법과 template 코드에서 이벤트를 발생시키는 2가지 방법이 있습니다.

emit 예제

<template>
  <h2>Child Component</h2>

  <button @click="onClicked">Emit from script</button>
  <button @click="$emit('event2', 2)">Emit from template</button>
</template>

<script>
export default {
  emits: ["event1", "event2"],
  setup(props, context) {
    const { emit } = context;
    const onClicked = () => {
      emit("event1", 10);
    };

    return {
      onClicked,
    };
  },
};
</script>

getCurrentInstance 사용

emit는 getCurrentInstance()를 이용해서도 획득할 수 있었습니다. 기존에는 useContext를 이용해서 획득할 수 있었는데, Vue 3.2.0 버전부터 useContext는 deprecated 되었습니다.

import { getCurrentInstance } from "vue";

export default {
  emits: ["event1", "event2"],
  setup() {
    const { emit } = getCurrentInstance();
    const onClicked = () => {
      emit("event1", 10);
    };

    return {
      onClicked,
    };
  },
};

<script setup> 내에서 사용하는 방법

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

const emit = defineEmits(["toggle-drawer"]);
const toggleDrawer = () => {
  emit("toggle-drawer");
};
</script>