Vue의 데이터 교환 3 [EventBus]

이번에는 주로 작은 서비스에서 자주 쓰이는 EventBus에 대해 알아볼 것이다. 조금 규모가 커지면, 보통 Vuex를 사용하는 경향이 있다. 그래도 알아두면 나쁠것은 없으니 알아보자.

 

1. 부모/자식 컴포넌트 사이에서 호출하기 위한 설정 -> 부모컴포넌트와 자식컴포넌트 사이에는 특별한 호출방식이 있다.
2. 모든 컴포넌트에 적용할 데이터/메소드 설정 -> 전역변수로 생각하면 편하다.
3. 전혀 관계없는 컴포넌트 사이에서 호출하기 위한 설정 -> 아무관계도 아니지만, 전역으로 할 필요는 없는 경우

---

3. 전혀 관계없는 컴포넌트 간의 호출 - EventBus

일반적으로 메소드, 변수를 정의할 때 한 오브젝트나 컴포넌트 단위로 묶어서 사용되기 때문에 이벤트를 사용할 필요가 없이 현재 위치에 포함된 메소드/변수를 호출하여 사용할 수 있습니다. 하지만 각각 분리되어 있는 개체에 전송하거나 알려줘야한다면 어떻게 해야할까요?

 

이럴때 공통으로 데이터들을 주고 받을 수 있는 공간을 만들고, 이를 통해서 서로 규격에 맞춰 데이터들을 주고 받으면 될 것 입니다. 이벤트를 등록하고 받을 준비가 끝났다면 언제 어디서든지 데이터들을 주고 받고, 각 이벤트요청 상황에 따라 원하는 메소드들을 수행할 수 있게 만든 것이 EventBus입니다. 쉽게 말해 컴포넌트간 메소드들을 서로 호출하게 해주는 것입니다. 아무 관계가 없는 컴포넌트 사이에서도 가능합니다.

 

vue.js에서 이벤트를 쉽게 다루기 위해 EventBus라는 개념을 이용할 수 있으며, 누구나 쉽게 사용할 수 있습니다.

// 이벤트버스 생성
var EventBus = new Vue()

// 이벤트 발행
EventBus.$emit('message', 'hello world');

// 이벤트 구독
EventBus.$on('message', function(text) {
    console.log(text);
});

자, 이렇게 하여 vue.js에서 이벤트를 쉽게 활용할 수 있습니다. 위와 같이 구현해놓는다면 컴포넌트, Vueapp이 전혀 다르더라도 서로 쉽게 호출할 수 있습니다.

 

 

이렇게 Vue에서 데이터/메소드를 호출/교환하는 방법에 대해 알아봤습니다. 저도 공부를 하며 정리한 것이라 틀린내용이 있을 수 있습니다. 또한 제가 모르는 것들이 더 많을 수도 있습니다. 그럴땐 꼭 피드백 부탁드립니다. 감사합니다.

 

 

 

참고 블로그 : 

https://vuejs-kr.github.io/jekyll/update/2017/02/13/vuejs-eventbus/

https://song8420.tistory.com/379