［VueJS］vue.js에서 이벤트 버스 사용하기

MPA(Multi Page Application)에서 Vue를 적용 시키던중

부모-자식간의 관계가 아닌 컴포넌트 간의 동작에 따른 데이터 변화와 이벤트 처리가 필요해졌습니다.

주로 공통 데이터를 다루기 위해 사용하는 부분이라 Vuex를 써볼까도 했지만,

Vuex 튜토리얼에서 앱이 단순하다면 Vuex없이는 괜찮을 것입니다. 간단한 글로벌 이벤트 버스만 있으면됩니다 라는 글귀를 읽고, 글로벌 이벤트 버스를 사용하자로 마음을 굳혔습니다.

아래와 같이 공통으로 사용할 이벤트버스 js 파일을 생성합니다.
Vue EventBus 객체를 생성하여 export 하여 다른 파일에서도 로드하여 사용 할 수 있도록 합니다.

// /js/eventBus.js
import Vue from 'vue'
const EventBus = new Vue();
export default EventBus;

그 후 해당 이벤트 버스를 사용할 컴포넌트들에서 eventBus.js를 import 하여 아래와 같이 사용했습니다.

/*******
* /js/Button.vue
********/

<template>
    <button @click.prevent="onClickButton">Click Me</button>
</template>
<script>
import EventBus from "./eventBus.js";
export default {
    props: ['code', 'title'],
    methods: {
        onClickButton() {
            EventBus.$emit("onModalButtonClick", this.code, this.title)
        }
    }
    
}
</script>

/*******
* /js/Modal.vue
********/

<template>
    <div id="myModal" class="modal" v-show="_isShow">
        ...
    </div>
</template>
<script>
import EventBus from './eventBus.js';
export default {
    data() {
        return {
            _isShow: false,
            code: null,
            title: null,
        }
    },
    mounted() {
        EventBus.$on("onModalButtonClick", (code, title) => {
            this.code = code;
            this.title = title;
            this._isShow = true;
        });
    }
}
... 
</script>

실제로는 위의 코드보다 복잡했지만, 예시에 불필요한 부분은 제거하였습니다.