vue - Event Bus 사용방법

데이터의 흐름을 쉽게 하기 위해 vuex라는 외부라이브러리가 있고, 메소드들을 서로 호출할 수 있도록 도와주는 eventBus라는 방법이 있다. 이중 eventBus의 사용방법에 대해 알아보자. 

이벤트를 사용하는 이유
일반적으로 메소드, 변수를 정의할 때 한오브젝트나 컴포넌트 단위로 묶어서 사용되기 때문에 이벤트를 사용할 필요가 없이 현재위치에 포함된 메소드/변수를 호출하여 사용할 수 있다. 하지만 각각 분리되어 있는 개체에 전송하거나 알려줘야한다면 어떻게 해야할까? 이럴 때 공통으로 데이터들을 주고 받을 수 있는 공간을 만들고, 이를 통해서 서로 규격에 맞춰 데이터들을 주고 받으면 될 것이다.  이벤트를 등록하고 받을 준비가 끝났다면 언제 어디서든지 데이터들을 주고 받고, 각 이벤트요청 상황에 따라 원하는 메소드들을 수행할 수 있을 것이다.

* vue Event Bus 사용 방법
- 직접  Event Bus를 만들고 import해서 사용하는 방법
- vue에 내장되어 있는 Event Bus를 이용하는 방법

1) import해서 사용하는 방법

장점: 부모-자식 사이가 아니여도 사용이 가능하다.
단점: 너무 많이 쓰이면 후에 관리하기 힘들다.(찾기 힘들다.)

1. Event Bus

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

const EventBus = new Vue();

export default EventBus;

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

<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 '../EventBus';
import ByWorld from './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를 등록해준다

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

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

}
</script>

그 후 중복되는 버스 호출을 막기 위해서 $off 를 사용한다.

4. $off

컴포넌트가 사라질 때 이벤트를 삭제한다.

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

<script>
import EventBus from '../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>