Vue에서 컴포넌트 간 기본적으로 데이터를 통신하는 방법은 props와 events라는 것은 알고 있을 것이라는 전제로 정리하겠습니다.
부모컴포넌트 --> 자식컴포넌트 : props(속성 정의만으로 전달)
자식컴포넌트 --> 부모컴포넌트 : events(이벤트 발생 시켜 전달)
하지만 컴포넌트가 부모, 자식 관계만 있는것은 아니고 형제컴포넌트, 손자컴포넌트도 있을 것입니다.
이럴경우 사용할 수 있는 방법이 이벤트버스를 이용하는 방법입니다.
이벤트버스는 컴포넌트가 많지 않아 규모가 작은 중소 프로젝트에 사용해야 합니다.
컴포넌트가 많아지고 복잡해 지면 누가 누구에게 통신을 하고 있는지 헷갈리기 떄문에 디버깅이 너무 힘들어 지게 됩니다.
그래서 대규모 Vue 프로젝트인 경우는 Vuex라이브러리를 사용하여 통신을 하게 됩니다.
Vuex에 대해서는 추후 포스팅을 할 예정이고 지금은 이벤트버스에 대해서만 포스팅 하겠습니다.
이벤트버스 생성 방법
쉽게 말해 이벤트버스는 비어있는 Vue 인스턴스 객체라고 보시면 됩니다.
보통 Vue 인스턴스 요소는 DOM요소이름, 컴포넌트정의, 데이터 등을 포함하고 있을텐데,
예제)
var vm = new Vue ({
el : '#test',
data : { name : '홍길동'},
})이벤트버스는 아무것도 없는 비어있는 Vue 인스턴스 입니다.
예제)
var eventBus = new Vue();위의 예제처럼 작성하면 정의는 끝입니다.
이제 이 인스턴스를 사용하여 데이터를 전달하는데 사용하면 됩니다.
이벤트버스 사용 방법
이벤트버스는 전달자 역활만 하는 빈 그릇일 뿐이고 사용방법은 events를 사용하여 데이터를 전달한는 방법과 동일합니다.
다만 자식컴포넌트에서 부모컴포넌트로만 한정적으로 전달하는 것과는 달리 형제컴포넌트간, 또는 손자, 할아버지컴포넌트 간 상관없이 전달이 가능하다는 장점이 있습니다.
var eventBus = new Vue();를 먼저 선언해서 만들어줘야 하구요..
데이터를 주고자 하는 컴포넌트에서는 events에서 $emit을 사용하여 eventBus객체에 값을 넣어줍니다.
예제)
javascript
Vue.component('child1', {
methods : {
clickEvent: function() {
...
eventBus.$emit('click1', data) // events에서 $emit을 사용하여 data를 eventBus에 전달함
}
}
})
데이터를 받고자 하는 컴포넌트에서는 Vue 인스턴스가 생성될 때(created 훅)으로 미리 이벤트 핸들러를 등록해 놓고 데이터가 오면 methods 에 정의한 변수로 전달하게 됩니다.
예제)
javascript
Vue.component('child2', {
created : function() {
eventBus.$on('click1', this.data1) // $on을 통해 click1의 값을 data1으로 넘김
},
methods : {
data1: function(d) { // 넘어온 data를 data1으로 받음
console.log('data', d);
}
}
})
말이 어렵지 사실 개념은 어렵지 않은은 이벤트버스 였습니다.
