[자식->부모] 이벤트,데이터 전달 (emit)

자식 (컴포넌트,팝업)에서 이벤트를 발생시켜 부모로 그 이벤트를 전달하는 방법이 있다.
이벤트만 발생시켜 전달해도 되고, 그 이벤트에 값을 담아 부모로 보낼수도 있다.

1. parent.vue

<template>
<!--
transedEvent: 팝업에서 발생한 이벤트 수신기, 
handlePopupEvent : 수신받은 이벤트를 실행시키는 함수
-->
  <ElDialog v-model="isPopupStatus">
  	<popup @transedEvent="handlePopupEvent" /> 
  </ElDialog>
</template>

<script setup>
function handlePopupEvent (data) { // 팝업에서 전달한 이벤트 수신
	console.log(data); // 팝업에서 전달된 데이터값
}
</script>

2. popup.vue

<template>
<el-form :model="form" :rules="formRules" ref="formRef">
	<el-form-item prop="password">
    	<el-input v-model="form.password"/>
    </el-form-item>
</el-form>
<el-button @click="$emit('closePopup')">취소</el-button> // 이벤트 발생
<el-button @click="onClickConfirm">확인</el-button>
</template>

<script setup>
const emits = defineEmits(['closePopup', 'pwMatched']);
function onClickConfirm () {
	emits('pwMatched'); // 이벤트 발생
}
</script>

popup.vue에선 emit으로 이벤트를 발생시킨다.
이 때 emit을 쓰는 방법은 2개가 있다.
태그 자체에 $emit()을 써서 발생시키던가
함수를 만들어 그 안에 emit 으로 발생시키면 된다.
간단한건 태그에 직접걸고, 복잡한건 함수로 만들면 적당할듯?