# props 전달 및 event 상속 KH
# 서론
vuex를 사용하는 경우는 대부분 여러 컴포넌트에서 사용할 때 vuex를 세팅하고 정보를 store에 저장하죠.
그렇지만 1, 2개 컴포넌트에서만 사용하는 정보는 굳이 store에 넣을 필요는 없고 해당 컴포넌트의 data에 정의하고 부모 자식간 props로 전달하는게 더 효율적일 것입니다.
그래서 오늘은 간단하게 부모가 자식에게 props를 내릴때, 그리고 자식이 부모로 부터 받은 함수를 이용해 부모 컴포넌트의 데이터에 영향을 주는 방법에 대해 알아보겠습니다.
# 부모 -> 자식 props 전달
예를 들어 하나의 view 화면이 있고, 그 view안에는 모달창이 자식 컴포넌트로 있다고 가정하고,
모달창에는 부모가 가진 point 라는 정보와 모달은 켜고 끈다는 함수를 넘겨주겠습니다.
부모 컴포넌트
<template>
<Button @click="showModal = true"> 모달열기 </Button>
<!-- 아래와 같이 부모는 자식 컴포넌트에 v-bind 또는 : 를 통해 props를 넘길 수 있습니다. -->
<!-- 함수의 경우 @넘길함수이름="정의한 함수 이름" 을 통해 자식에게 부모 함수를 넘깁니다. -->
<Modal
:show="showModal"
:point="this.point"
@close="handlePointStorageClose"
/>
</template>
<script>
import Modal from '...';
data(){
return {
showModal: false,
point: 1000
}
},
methods: {
handlePointStorageClose(close){
this.showShortageModal = close;
}
}
</script>
# 자식 -> 부모 이벤트 발생
다음으로 자식컴포넌트에서 부모 컴포넌트에서 받은 함수를 기반으로 부모 데이터를 바꾸겠습니다
자식 컴포넌트
<template>
<div>
<!--2. prop으로 받은 point는 아래와 같이 templete에서는 point로 script에서는 this.point로 사용합니다.-->
<p>포인트 : {{ point }}P</p>
<!--3. 부모로 받은 함수는 templete에서는 $emit()으로 script에서는 this.$emit()으로 사용합니다. 첫번째 인자로는 부모로 받은 인자(@close)인 close를 사용하고 두번째 인자는 부모 컴포넌트의 함수의 첫번째 인자로 들어갑니다. (close) -->
<Button @click="$emit('close', false)">
닫기
</Button>
</div>
</template>
<script>
export default {
//1. 먼저 아래와 같이 props로 받은 정보가 어떤 자료형인지 정의합니다. 정의한 경우 정의된 자료형과 다른 자료형의 데이터가 들어오면 warning을 console에 띄웁니다.
props: {
show: Boolean,
point: Number,
close: Function
}
};
</script>
