Vue.js 이벤트 버스(event bus)

vue.js 의 props 와  event는  부모자식간 상위 하위 관계의 컴포넌트끼리의 통신에 적합하다

 

그런데 만약 형제자매인 같은 레벨의 컴포넌트끼리간 데이타를 전달해야된다면?

 

그때마다 필요치 않은 부모(상위) 컴포넌트를 만들어서 하위 ->상위->하위로 왔다갔다 해야하나?

 

그 문제로 인해 이벤트 버스가 나오게 됬다

 

생성한 인스턴스를 이용, 보내는쪽은 $emit,  받는쪽은 $on 

 

 

 

1. 이벤트 버스 코드 형식

 

//이벤트 버스를 위한 추가 인스턴스 생성
var eventBus = new Vue();


//이벤트를 보내는 컴포넌트
methods: {
  showLog: function() {
    eventBus.$emit('전달 이벤트명', 전달 데이터);
  }
}

//이벤트를 받는 컴포넌트

created: function() {
  eventBus.$on('전달받아 트리거된 이벤트명', function(받은 데이터){
    ........
  });
}

 

 

 

 

 

2. 이벤트 버스 예시

 

 

<div id="app">
 <child-component></child-component>
</div>

var eventBus = new Vue();

Vue.component('child-component', {
  template: '<div><button v-on:click="myMethodCall">clickHere</button></div>',
  methods: {
    myMethodCall: function() {
      eventBus.$emit('eventTrigger', '난 너를 호출했다!' ); //이벤트 트리거한쪽(보내는쪽)
    }
  }
});

var app = new Vue({
  el: '#app',
  created: function() {
    eventBus.$on('eventTrigger', function(value){  //이벤트 받은쪽
      console.log("이벤트를 전달 받은 내용: ", value);
    });
  }
});

//결과:  난 너를 호출했다!