이전 게시물에서는 event emit과 props를 이용한 상/하관계의 컴포넌트간의 통신을 다뤘습니다.
이번 게시물에서는 상하관계가 아닌 컴포넌트간의 통신을 다루겠습니다.
한마디로 정리하자면 event, props를 사용하여 컴포넌트 3개간의 통신을 만든다고 생각하시면 됩니다.
그림과 같이 상하관계가 없는 2개의 하위 컴포넌트가 root 또는 상위 컴포넌트를 통해 통신을 할 수 있습니다.
event와 props에 관한 설명은 이전 게시물에 하였으니, 바로 예제 코드와 코드에 관한 간력한 설명으로 넘어가겠습니다.
lowComponent2에 있는 버튼을 누르면 이벤트를 통해 deliverNum메소드가 동작하여 root 컴포넌트의 num이 1증가합니다.
이러한 num변수는 lowComponent1에 존재하는 propsdata와 props를 통해 같은 값이 되게됩니다.
코드예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<low-component1 v-bind:propsdata="num"></low-component1>
<low-component2 v-on:increase="deliverNum"></low-component2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var lowComponent1 = {
template: '<div>low component 1</div>',
props: ['propsdata']
}
var lowComponent2 = {
template: '<div>low component 2<button v-on:click="passNum">increase number</button></div>',
methods: {
passNum: function() {
this.$emit('increase');
}
}
}
new Vue({
el: '#app',
components: {
'low-component1': lowComponent1,
'low-component2': lowComponent2
},
data: {
num: 0
},
methods: {
deliverNum: function() {
this.num = this.num + 1;
}
}
})
</script>
</body>
</html>
코드의 결과는 다음과 같습니다.
 |
 |
최초에 root컴포넌트의 num과 LowComponent2의 propdata는 0으로 초기화됩니다.
 |
 |
LowComponent에 위치한 버튼을 클릭하면 root의 num과 LowComponent2의 propsdata가 1씩 증가합니다.
LowComponent2에 존재하는 버튼을 클릭하면 num과 propsdata 모두 변경됩니다.
root또는 상위 컴포넌트에 존재하는 변수를 이용하여 하위 컴포넌트간 데이터 변경 이벤트를 발생하는 등의 방법으로만 통신을 진행할 수 있습니다.
* 개발하는 입장에서는 다소 불편할 수 있지만, 이는 event와 props를 이용하여 데이터를 전달함으로 컴포넌트간 독립성규칙을 지키기 위함입니다.
참조
[강의] 인프런 - Vue.js 시작하기 - Age of Vue.js(캡틴판교) https://www.inflearn.com/course/age-of-vuejs
'Vue' 카테고리의 다른 글
| [Vue] 뷰 라우터 (0) | 2022.05.16 |
|---|---|
| [Vue] 컴포넌트간 통신(event, props) (0) | 2022.04.22 |
| [Vue] 컴포넌트 (0) | 2022.04.13 |
| [Vue] 인스턴스 (0) | 2022.04.07 |
| [Vue] Vue.js 소개 (1) | 2022.04.04 |
댓글