이전 포스팅에서 컴포넌트는 화면내에서 영역별로 관리하는 것이라고 정리할 수 있습니다.
이렇게 영역별로 구성된 컴포넌트는 상위/하위의 개념이 생겨, 컴포넌트간의 관계(부모/자식)이 형성됩니다.
이번 포스팅에서는 상위/하위 컴포넌트 간의 통신에 대해 다루겠습니다.
컴포넌트간 통신은 상위에서 하위로 이뤄지는 event와 하위에서 상위로 이뤄지는 props가 있습니다.
이러한 event와 props로 컴포넌트간 모든 통신이 제어됩니다.
event
- 하위에서 상위로 데이터를 전달 -> event 발생
먼저, event를 사용하기 위해서는 인스턴스 옵션에서 methods를 이용해야합니다.
* 오해하실 수도 있는게 methods옵션은 event를 위한 옵션이 아니라 Vue 인스턴스를 제어하기위한 옵션이고 이러한 특징을 이용하여 event를 발생시켜 데이터를 전달합니다.
먼저, 하위 컴포넌트에 methods라는 옵션을 이용해야합니다.
methods에서 정의하여 이벤트 처리방법을 함수에 정의하면 됩니다.
하지만 이번 게시물에서는 상위 컴포넌트로 전달 및 통신이 목적이기 때문에 emit으로 이벤트를 전달합니다.
또한, 상위 컴포넌트에서 해당 이벤트를 전달받았을 때의 행동을 정의합니다
// JavaScript
new Vue({
el : ' ',
components:{
"하위 컴포넌트" :{
methods:{
"이벤트 명" : function(){
this.$emit('전달 메시지');
}
}
}
}
methods :{
"이벤트 명" : functuin(){
event emit에 따른 동작 정의
}
}
});그 후, html상에서 v-on를 이용하여 특정 이벤트가 발생했을때 어떤 메소드를 실행할지 연결해야합니다.
또한, 상위 컴포넌트에서 event emit을 전달받았을때 어떤 메소드를 실행할지를 연결합니다. 단, 이때 v-on으로 지정할 이벤트는 pass가 됩니다.
<!-- html -->
<div id="el명">
<"컴포넌트" v-on : "하위 컴포넌트에서 발생한 이벤트" = "상위 컴포넌트의 method 명"></"컴포넌트">
</div>
이러한 설명은 이해가 어려울것이며, 코드 예시를 보신다면 좀더 이해가 쉬울거 같습니다.
코드
코드에 대해 간단히 설명 드리자면, num = 0이 초기화 되어있으며 버튼을 클릭할 시 num이 1씩 증가하는 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header v-on:increase="receiveEvent"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader={
template: '<button v-on:click="passEvent">CLICK</button>',
methods : {
passEvent : function(){
this.$emit('increase');
}
}
};
new Vue({
el: '#app',
components:{
'app-header':appHeader
},
methods:{
receiveEvent : function(){
this.number=this.number+1;
}
},
data : {
number : 0
}
});
</script>
</body>
</html>결과를 보시면 최초에는 root 컴포넌트에 값이 0인 num이 존재합니다.
그 후, CLICK 버튼을 누르면 num이 증가하여 1로 변경되는 것을 확인할 수 있습니다.
* 단, Vue devtool화면에 즉각적으로 변하지는 않고 잠시 AppHeader 컴포넌트를 클릭했다가 다시 root 컴포넌트를 클릭하면 변경된 num을 확인할 수 있습니다.
쉽게 생각하면 하위 컴포넌트에서 특정 상황이 발생하고 상위 컴포넌트에 통신하는 이벤트가 발생했다고 생각하시면 될거 같습니다.
props
- 상위에서 하위로 데이터를 전달 -> props 전달
props를 사용하기 위해서는 인스턴스 옵션에서 props를 이용해야합니다
props를 사용하는 코드를 보여드리고 예시를 보여드리겠습니다.
먼저, 하위 컴포넌트에 props라는 옵션을 이용해야합니다.
// JavaScript
new Vue({
el : ' ',
components:{
"하위 컴포넌트 이름" : {
props : ['프롭스 속성명']
}
}
});
그 후, html상에서 v-bind를 이용하여 상위 컴포넌트의 데이터 명과 프롭스 속성을 연결해야합니다.
<!-- html -->
<"컴포넌트" v-bind : "프롭스 속성명" = "상위 컴포넌트 데이터명"></"컴포넌트">
이어서, 전체적인 코드 예시와 동작 결과를 보여드리겠습니다.
코드 예시
하위 컴포넌트의 경우 변수로 따로 지정하여 상위컴포넌트의 components옵션에 지정해줬습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header v-bind:propsdata=str></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader={
template: '<h1>header</h1>',
props:['propsdata']
};
new Vue({
el: '#app',
components:{
'app-header':appHeader
},
data:{
str:'hello'
}
});
</script>
</body>
</html>
결과를 보시면 상위 컴포넌트(root)의 데이터인 str의 값이 하위 컴포넌트의 props에 동일한 값으로 존재하는 것을 확인할 수 있습니다.
 |
 |
이어서, 상위 컴포넌트의 데이터를 수정해보겠습니다. str을 "hello"에서 "hello world"로 수정하면 하위 컴포넌트의 props에도 "hello World"로 수정된 값을 확인할 수 있습니다.
* 즉, 상위 컴포넌트에서의 데이터 변경을 하위 컴포넌트에도 전달하여 상/하위 컴포넌트간 통신이 정상적으로 이뤄지는 것을 확인 할 수 있습니다.
 |
 |
이러한 event와 props를 이용하여 데이터를 전달함에도 컴포넌트간 독립성을 유지가 가능합니다.
또한, 이러한 규칙을 이용하여 상위/하위 관계성이 없는 컴포넌트간에도 통신이 가능합니다.
이는 다음 게시물에서 다루겠습니다.
참조
[강의] 인프런 - Vue.js 시작하기 - Age of Vue.js(캡틴판교) https://www.inflearn.com/course/age-of-vuejs
'Vue' 카테고리의 다른 글
| [Vue] 뷰 라우터 (0) | 2022.05.16 |
|---|---|
| [Vue] 상하관계가 아닌 컴포넌트간 통신 (0) | 2022.04.25 |
| [Vue] 컴포넌트 (0) | 2022.04.13 |
| [Vue] 인스턴스 (0) | 2022.04.07 |
| [Vue] Vue.js 소개 (1) | 2022.04.04 |
댓글