위에서 아래로는 프롭스, 아래서 위로는 이벤트를 발생시켜 컴포넌트간에 통신을 했다.
그러면 같은 레벨의 컴포넌트 사이에 통신은 어떤식으로 이루어질까?
- Root
- AppHeader
- AppContent
이런식의 레벨 구조를 가진 컴포넌트일 때, AppHeader 컴포넌트와, AppContent간의 통신을 구현해보자
데이터 통신의 방식은 다음과 같다.
1. AppContent에서 Root로 event로 데이터 전달
2. Root에서 AppHeader로 데이터 전달
<body>
<div id="app">
<app-header v-bind:propsData="num"></app-header>
<!-- 상위컴포넌트의 num변수와 대응되는 appHeader의 props는 propsData이다 -->
<app-content v-on:pass="deliverNum"></app-content>
<!-- 2. appContent의 pass라는 함수는 상위컴포넌트의 deliverNum함수와 대응 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template : '<div>{{propsData}}</div>' ,
props : ['propsData']
}
var appContent = {
template : '<div>Content<button v-on:click="passNum">pass</button></div>' ,
methods : { //1. 버튼을 클릭했을 때 passNum이라는 이벤트를 발생시켜 루트로 전달
passNum : function () {
this.$emit('pass',10)
}
}
}
new Vue({
el: '#app',
components : {
'app-header' : appHeader,
'app-content' : appContent
},
data:{
num: 0
},
methods : { // 3. 하위컴포넌트에서 받아온 값을 인스턴스 변수에 넣어준다.
deliverNum : function (value) {
this.num = value
}
}
})
</script>
</body>
결과물은 다음과 같다.
1. AppHeader의 propsData에 값이 잘 들어감
2. Root의 데이터에도 값이 잘 들어감
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.
'Study > Vue' 카테고리의 다른 글
| Vue.js 시작하기 07. HTTP 통신 라이브러리 - axios (0) | 2022.01.22 |
|---|---|
| Vue.js 시작하기 06. 뷰 라우터 (0) | 2022.01.20 |
| Vue.js 시작하기 04. 컴포넌트 통신방식 (0) | 2022.01.19 |
| Vue.js 시작하기 03. 컴포넌트 (0) | 2022.01.18 |
| Vue.js 시작하기 02. 인스턴스 (0) | 2022.01.17 |