vue3 자식->부모, emit 예시

자식에서 부모로 데이터 전달시 사용하는 emit 사용예시
주로 팝업사용할 때 많이 사용한다.

1. parent.vue

<template>
  <div>
    <button @click="showPopup = true">Open Popup</button>
    <PopupComponent v-model="showPopup" @close="handleClose" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import PopupComponent from './Popup.vue';

const showPopup = ref(false);

function handleClose() {
  showPopup.value = false;
}
</script>

2. popup.vue

<template>
  <div class="popup">
    <p>Popup Content</p>
    <button @click="closePopup">Close</button>
  </div>
</template>

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

const emit = defineEmits(['close']);

function closePopup() {
  emit('close');
}
</script>