[vue3] 컴포지션API 에서 defineEmits 하는 역할은?

<script setup>에서는 defineProps, defineEmits, withDefaults, 등과 같은 Composition API의 기능을 묵시적으로 사용할 수 있습니다.

defineEmits는 이벤트를 부모 컴포넌트로 발송하기 위한 것으로, <script setup>에서는 더 간단하게 사용할 수 있습니다.

아래는 <script setup>에서 defineEmits를 사용하는 예제입니다:

<template>
  <button @click="notifyParent">Click me</button>
</template>

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

const { emit } = defineEmits();

const notifyParent = () => {
  // 'notify'라는 이벤트를 발생시킵니다.
  emit('notify');
};
</script>

이 코드에서 defineEmits는 emit 함수를 반환합니다. emit 함수를 사용하여 이벤트를 발생시킬 수 있습니다. 위의 코드에서는 'Click me' 버튼을 클릭할 때 notifyParent 함수가 실행되면서 'notify'라는 이벤트를 부모 컴포넌트로 발송합니다.

이를 부모 컴포넌트에서 사용하려면 다음과 같이 할 수 있습니다:

<template>
  <ChildComponent @notify="handleNotify" />
  <p v-if="notified">Child notified!</p>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const handleNotify = () => {
  notified.value = true;
};

const notified = ref(false);
</script>

이렇게하면 자식 컴포넌트에서 발생한 'notify' 이벤트를 감지하고, 그에 대한 처리를 수행할 수 있습니다. <script setup>을 사용하면 코드가 간결해지고 가독성이 향상되는 등의 이점을 얻을 수 있습니다.