이 글은 인프런의 캡틴판교님의 강의를 수강하면서 개인 공부를 위해 작성한 글입니다.
도식화
-> vue는 데이터를 전달할 때 상위로는 function을 이용해서 데이터를 전달하고 하위로는 props라고 하는 데이터를 전달 하여 서로 주고 받는다.
-> 같은 레벨일 경우 상위로 function을 이용해서 데이터를 전달하고 상위 컴포넌트가 다시 props로 데이터를 전달 해줘야한다.(내 생각으로는,,,vue의 단점 같다,,,)
이번에는 같은 레벨에 있는 컴포넌트끼리 데이터 통신 방법에 대해 정리해본다.
코드
<body>
<div id="app">
<!-- 9. v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름" -->
<app-header v-bind:propsdata="num"></app-header>
<!-- 8. v-on:하위 컴포넌트에서 발생한 이벤트명="상위컴포넌트 메서드 명" -->
<!-- <app-componet v-on:pass="deliverNum(value라는 값이 보이지 않지만 들어있음)"></app-componet> -->
<app-componet v-on:pass="deliverNum"></app-componet>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
// 10. 상위 컴포넌트에서 전달 받은 propsdata를 props에 명시해준다.
template : '<div>header</div>',
props : ['propsdata']
}
var appComponent = {
// 3. 하위 컴포넌트 appComponent에서 div 생성
// 4. v-on:click을 통해 클릭하면 passNum이라고 하는 함수를 실행한다.
template : '<div>component<button v-on:click="passNum">pass</button></div>',
methods : {
// 5. 함수 생성
passNum : function(){
// 6. 상위 컴포넌트에 emit을 이용해서 function 전달,
// 이때 $emit('상위로 전달할 함수명', data)를 명시하면 된다.
this.$emit('pass',10);
}
}
}
new Vue({
// 1. 상위 컴포넌트 생성
el : '#app',
components : {
// 2. 하위 컴포넌트 생성
'app-header': appHeader,
'app-componet': appComponent
},
data : {
num : 0
},
methods : {
// 7. value를 전달할 함수 생성
deliverNum : function(value){
this.num = value;
}
}
})
</script>
</body>
인생은 IT 노가다