TIL. Vue.js [Event Bus]

vue 에서는 서로 전혀 관련이 없는 독립적인 컴포넌트 사이에 데이터의 전달을 어떻게 하는 것 일까?

React에서 Redux를 사용하는 것 처럼 Vue 도 Vuex라는 state 관련 외부 라이브러리가 존재한다.
하지만 이번 경우에는 Vuex를 쓰지 않으면 안될 만큼 규모가 큰 것이 아니었다.

따라서 다루어야하는 데이터의 규모가 더 작을 경우 독립적인 컴포넌트 사이에 데이터 통신을 간편하게 할 수 있는 방법에 대해서 소개하고자 한다.

바로, Event Bus 를 활용하는 것이다.

1. Event Bus 초기화

Event Bus를 활용하는 것은 매우 간단하다. 하나의 vue인스턴스를 생성해주면 된다.
이 인스턴스는 서로 독립적인 컴포넌트 간의 데이터 통신의 중간지점으로 이용된다.

vue component <-> EventBus <-> vue component

eventBus.js

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

2. 이벤트 발행($emit)

Event Bus를 생성했으니, 이제 데이터를 전달할 이벤트를 호출(생성)해주어야한다.

이벤트 발행 형식

$emit 을 이용하여 이벤트 이름과 데이터를 포함시켜 내보냄

EventBus.$emit("이벤트 이름", 전달하는 데이터 or 값);

이벤트 발행 예시

이번 경우에는, PostModifyDel.vue -> Main.vue 로 데이터가 전달되어야 하기 때문에 PostModifyDel.vue에서 이벤트를 호출해주었다.

PostModifyDel.vue

EventBus.$emit("pushData", res.data.result);

PostModifyDel.vue 컴포넌트에서 res.data.result 라는 데이터를 pushData 라는 이벤트로 호출한 것이다.

3. 이벤트 등록($on)

이벤트를 호출(생성)했으니 데이터를 사용하고 싶은 곳에서 원하는 이벤트를 등록해주어야한다.

$on 메소드를 이용하여 첫번째 파라미터 에는 이벤트 이름, 두번째 파라미터 에는 콜백함수를 지정해준다.

(이벤트를 한번만 받아보고 싶은 경우에는 $on대신 $once 를 사용하면 된다.)

Main.vue

    EventBus.$on("pushData", payload => {
      this.pushedData = payload[0];
      this.newTitle = payload[0].title;
    });

4. Event Bus 해제($off)

Event Bus를 해제하는 것 또한 아주 간단한다. $off메소드를 활요하는 것이다.

특정 이벤트를 해제할 경우에는 다음과 같이 하면 된다.

    EventBus.$off("pushData");

만약 특정 이벤트가 아닌, 모든 이벤트를 해제하고 싶은 경우는

    EventBus.$off();

를 사용하면 된다.