Vue - Event Bus 사용법

우선 Vue Event Bus 사용에는 두가지 방법이 있습니다.

- 직접 Event Bus를 만들고 import 해서 사용하는 방법

- Vue에 내장되어있는 Event Bus 를 이용하는 방법

 

 

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>

Event Bus를 호출하면 아래와 같이 잘 나옵니다.

 

Change Component 버튼을 눌러서 컴포넌트를 삭제 후

다시 HelloWorld를 클릭하면 Event Bus는 남아있기 때문에 2개의 로그가 동시에 보이는 문제가 발생합니다.

 

 

이런 중복되는 버스 호출을 막기 위해서 $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>

 

 

Vue에 내장되어있는 Event Bus 를 이용하는 방법

 

장점 : 부모-자식 관계이기 때문에 함수의 위치가 명확하다.

단점 : 부모의 부모의 부모의 ...  컴포넌트까지 데려갈려면 복잡해진다.

 

1. 부모

<template>
  <div>
    <ByWorld @hello-world="childMsg" ></ByWorld>
    {{msg}}
  </div>
</template>

<script>
import ByWorld from './ByWorld';

export default {
  name: 'HelloWorld',
  components:{
    ByWorld
  },
  data(){
    return{
      msg: '',
    }
  },
  methods:{
    childMsg(payload){
      this.msg = payload;
    }
  }
}
</script>

 

2. 자식

<template>
    <div>
        <button v-on:click="helloWorld">자식 버튼</button>
    </div>
</template>

<script>
export default {
    methods:{
        helloWorld(){
            this.$emit('hello-world', '안녀엉');
        }
    }
}
</script>

 

버튼 클릭 시 메시지가 나오는 것을 확인할 수 있습니다.

Event Bus를 사용하면서 이벤트가 중복으로 호출되어 당황한 기억이 있어서 정리했습니다.