[Vue.Js] 7. Vue.Js 컴포넌트간의 통신2
저번에 상위에서 하위에 props를 통해 데이터를 넘겨주는 방법을 봤습니다.
이번엔 하위에서 상위로 데이터를 보내는 방법에 대해 알아보겠습니다.
일단 이벤트 버스라는 것을 통해 전달해야 되며 Vue에서는 ”$emit”(이벤트)과 ”v-on:”(이벤트 수신)속성을 통해 주고받을 수 있습니다.
아래는 전체 예제 코드입니다.
<!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>Component Comu4</title>
</head>
<body>
<div id="app">
<child-component v-on:display-text="parent_event"></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
<script>
Vue.component('child-component', {
template: '<button v-on:click="displayTxt">Display</button>',
methods: {
displayTxt: function() {
this.$emit("display-text");
}
}
});
new Vue({
el: '#app',
methods: {
parent_event: function(){
alert("alert");
}
}
});
</script>
</body>
</html>
양이 많으니 Vue 코드와 app영역 만 따로 보겠습니다.
<div id="app">
<child-component v-on:display-text="parent_event"></child-component>
</div>
Vue.component('child-component', {
template: '<button v-on:click="displayTxt">Display</button>',
methods: {
displayTxt: function() {
this.$emit("display-text");
}
}
});
new Vue({
el: '#app',
methods: {
parent_event: function(){
alert("alert");
}
}
});위의 코드를 보시면 component의 template에 v-on이 있고 methods 속성 안에 displayTxt가있습니다.
내용을 보시면 $emit이 있죠 여기서 this의 이미는 자기자긴(객체)를 가르키는 말입니다.
$emit안에 display-text를 적어놨습니다.
그리고 Vue 인스턴스의 methods속성에 parent_event라고 알림창을 띄우는 메소드를 정의해 놨습니다.
하위에서 상위의 이벤트를 발생시키기 위한 문법을 보면 v-on:($emit_event)=”(parent_event)”로 볼 수 있습니다.
여기서는 위쪽에 app영역을 보시면 childe-component에 v-on:display-text=”parent_event”에 해당하죠.
이를 말로 하면 childe-component의 클릭이벤트인 displayTxt를 실행시키면 $emit(display-text)가 실행되며
이는 현재 v-on을 통해 parent_event가 되어있어 상위의 parent-event를 실행 시킬 수 있게 된겁니다.
따라서 아래의 실행 결과를 보시면 parent_event를 수행한 것을 확인할 수 있습니다.
이를 통하여 상위의 메소드를 실행시켜 데이터를 교환하거나 위와 같이 상위의 특정 이벤트를 발생 시킬 수 있습니다.
다음은 같은 레벨 혹은 다른 관계에서 컴포넌트 간 통신 방법을 알아보겠습니다.