뷰(Vue) 이벤트 버스 객체를 이용한 통신
뷰에서 부모 - 자식 관계의 컴포넌트는 정보 전달을 위해 props와 events를 사용한다! 하지만 부모-자식 관계가 아닐 경우에는 어떻게 정보 전달이 이루어질까?
두 컴포넌트의 관계가 형제 관계 또는 부모와 손자, 증손자 관계일 경우 정보전달을 이벤트 버스(Event Bus) 객체를 만들어 사용한다.
<script>
var eventBus = new Vue();
</script>(비어있는 Vue 인스턴스를 만들어 사용)
1. created 이벤트 훅을 이용해 Vue 인스턴스가 만들어질 때 $on 메서드를 사용해 이번트 수신 정보 등록
2. 이벤트를 발신하는 컴포넌트에서는 $emit 메서드를 호출
See the Pen [Vue.js] 뷰 이벤트 버스 객체를 이용한 통신 by junheeleeme (@junheeleeme) on CodePen.
child1-component의 버튼을 클릭하면 clickEvent 메서드 실행
<!-- 첫 번째 자식 컴포넌트 시작 -->
<template id="child1Template">
<div>
<button v-on:click="clickEvent">Child1 Button!</button>
<div>{{currentTime}}</div>
</div>
</template>
<script>
Vue.component('child1-component',
{
template : '#child1Template',
data : function(){
return {currentTime : ''};
},
methods : {
clickEvent : function(){
var d = new Date();
var t = d.toLocaleTimeString() + " " + d.getMilliseconds() + "ms";
eventBus.$emit('click1', t);
this.currentTime = t;
}
}
})
</script>
<!-- 첫 번째 자식 컴포넌트 끝 -->
'child1-component' 이벤트 버스 객체의 $emit 메서드를 이용해 'click1' 이라는 이벤트를 전송하고 'child2-component' 의 created 이벤트 훅에서 $on 메서드로 이벤트를 전달받는다.
'click1' 이벤트가 수신되면 child1Click 메서드가 호출되면서 시간 정보를 전달받아 timelist 데이터 옵션에 추가한다.
<!-- 두 번째 자식 컴포넌트 시작 -->
<template id="child2Template">
<ul>
<li v-for="t in timelist">{{t}}</li>
</ul>
</template>
<script>
Vue.component('child2-component',
{
template : '#child2Template',
data : function(){
return {
timelist : []
};
},
created : function(){
eventBus.$on('click1', this.child1Click);
},
methods :{
child1Click : function(time) {
this.timelist.push(time);
}
}
}
)
</script>
<!-- 두 번째 자식 컴포넌트 끝 -->