$emit
emit은 하위 컴포넌트에서 상위 컴포넌트에게 이벤트를 전달하기 위해 사용한다.
* 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달
this.$emit('이벤트 명', 값);
* 상위 컴포넌트에서는 하위컴포넌트에서 넘어온 이벤트와 값을 처리
v-on:'이벤트 명'="methods 명"
예)
modal.vue
<template>
<div class="modal" :class="{'is-active':modalOpen}">
<div>
<div class="modal-background" @click="closeModal()"> 삭제</div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">날짜</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<textarea class="textarea"></textarea>
</section>
<footer class="modal-card-foot">
</footer>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
props: ['modalOpen'],
data() {
return {
buttonMessage: ["저장", "취소"],
}
},
methods: {
closeModal() {
this.$emit('parentCloseModal', false); // $emit('넘길이벤트명', 값);
}
}
}
</script>
<style lang="scss">
.is-active {
display:block !important;
}
.modal {
display: none;
}
</style>
ParendModal.vue
<template>
<div>
<button @click="showModal()>모달 선택</button>
<Modal v-bind:modalOpen="modalOpen" v-on:parentCloseModal="closeModelParent"></Modal>
</div>
</template>
<script>
import Modal from './modal.vue'
export default {
components: { Modal },
data(){
modalOpen: false
},
methods: {
showModal() {
this.modalOpen = true;
},
closeModelParent(){
this.modalOpen = false;
}
}
}
</script>