[Vue] Event Bus

Event Bus란

컴포넌트간에 데이터를 주고 받거나, 메소드를 사용하는 등 컴포넌트 간에 통신을 해야하는 상황에서 부모 자식간의 관계 상관 없이 간편하게 전달하게 해주는 방법입니다. 

 

장단점

• 장점 : 간편하게 사용할 수 있다.
• 단점 : 너무 남발하여 사용하면 추적이 힘들어서 관리가 힘들고, 데이터 충돌 등의 이슈가 발생할 수 있다.

 

사용 방법

 

1. Event Bus 생성

// EventBus.js
import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;

 

2. $emit

이벤트 호출
$emit('이벤트 이름', option)
option에 값을 넣어서 보낼 수 있다.

//받는쪽 vue
<template>
  <div class="hello">
    <button v-on:click="clickBtn">HelloWorld</button>
    <button v-on:click="changeComponent">Change Component</button>
    <ByWorld v-if="isComponent"></ByWorld>
  </div>
</template>

<script>
import EventBus from '@/js/EventBus';
import ByWorld from '@/views/ByWorld'

export default {
  name: 'HelloWorld',
  components:{
    ByWorld
  },
  data(){
    return{
      isComponent : true,
    }
  },
  methods:{
    clickBtn(){
      EventBus.$emit('push-msg', '안녕');
    },
    changeComponent(){
      this.isComponent = !this.isComponent;
    }
  }
}
</script>

 

3. $on
이벤트 받는 컴포넌트에서 사용할 Event Bus를 등록 해준다.

// 보내는쪽 vue
// ByWorld.vue

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
import EventBus from '@/js/EventBus';
export default {
    data(){
        return{
            msg: '',
            count: 0,
        }
    },
    created(){
        EventBus.$on('push-msg', (payload)=>{
            this.msg = payload;
            this.count++;
            console.log(this.count);
        });
    }

}
</script>

 

4. @off
컴포넌트가 사라질 때 이벤트를 삭제시킨다.

// 보내는쪽 vue
// ByWorld.vue

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
import EventBus from '@/js/EventBus';
export default {
    data(){
        return{
            msg: '',
            count: 0,
        }
    },
    created(){
        EventBus.$on('push-msg', (payload)=>{
            this.msg = payload;
            this.count++;
            console.log(this.count);
        });
    },
    beforeDestroy(){
        EventBus.$off('push-msg');
    }

}
</script>