Vue 이벤트 버스(EventBus)

부모 컴포넌트 -> 자식 컴포넌트 props를 전달하거나 자식 컴포넌트 -> 부모 컴포넌트로 events를 발생시켜 전달하는 것 외에도

형제 컴포넌트끼리 데이터를 통신할 수 있는 방법이 EventBus이다.

 

 

** EventBus는 컴포넌트가 많지 않아 규모가 작은 프로젝트에 사용해야 한다. (대규모 프로젝트에서는 vuex를 사용)

 

😐  이벤트버스 생성 방법

EventBus는 쉽게 말해 비어있는 Vue 인스턴스 객체라고 할 수 있다.

이 인스턴스를 독립적인 각 컴포넌트끼리 통신할 때 중간 다리로 활용한다.

(데이터 전달 방향 : vue components -> EventBus -> vue component)

import Vue from "vue";
var EventBus = new Vue();

 

🤪  이벤트버스 사용 방법

EventBus는 전달자 역할만 하는 빈그릇일 뿐이고 사용방법은 자식이 부모에게 events를 사용하여 데이터를 전달한 방법과 동일하다.

데이터를 보내는 컴포넌트의 events에서 $emit을 사용하여 eventBus 객체에 값을 넣어주면 된다.

 

// 이벤트(데이터)를 보내는 컴포넌트 => EventBus.$emit('이벤트명', data);

// 이벤트를 보내는 컴포넌트
<template>
 <section>
  <button @click="clickEvent"></button>
 </section>
</template>

<script>
import { EventBus } from "./경로";

export default {
 data() {
  return {
   clickCount: 0;
  }
 },
 methods: {
  clickEvent() {
   this.clickedCount++;
    EventBus.$emit('use-evetbus', this.clickedCount);
    // 'use-eventbus'의 이벤트 이름으로 clickedCount 데이터를 포함해서 내보낸다.
  } 
 } 
};
</script>

 

// 이벤트(데이터)를 받는 컴포넌트 => EventBus.$on('이벤트명', 콜백함수);

// 이벤트를 받는 컴포넌트 
<template>
 <section>{{ receivedClickCount }}</section>
</template>

<script>
import { EventBus } from '경로';
export default {
 data() {
  return {
   receivedClickCount: 0
  }
 },
 created() { // 첫번째 파라미터는 이벤트명, 두번째 파라미터는 콜백함수
  EventBus.$on('use-eventbus', clickedCount => {
   this.receiveClickCount = clickedCount;
  }
 }
};
</script>

이벤트를 받을 때 $on 메서드를 활용해서 첫번째 파라미터에 이벤트 이름, 두번째 파라미터로는 콜백함수를 지정한다.

콜백함수에서의 파라미터로 EventBus를 내보낼 때 지정한 데이터를 받아볼 수 있다.

 

이벤트를 한번만 받아보고자 한다면 $on 대신 $once를 사용하면 된다.

 

// 이벤트버스 해제
EventBus.$off('use-EventBus');

 

해당 이벤트 이름을 가진 EventBus가 아닌 모든 EventBus 를 해제하고자 한다면 EventBus.$off();를 사용하면 된다.