eventBus 간단 정리

 

event bus

빈 이벤트 객체를 통해 컴포넌트간 데이터를 전달하는 것
부모, 자식이 아니라도 형제끼리 통신할 수 있다.
 

event bus 메서드

$emit() : 이벤트(데이터) 전송
$on() : 이벤트(데이터) 수신
$off() : 이벤트(데이터) 삭제
 
만들면서 이해해보자
 
우선 빈 Vue 인스턴스 객체를 생성한다

// bus.js

import Vue from 'vue';
// 텅 빈 이벤트 객체
export default new Vue();

 
정말 텅 빈 객체.
그저 컴포넌트간 데이터를 전달하는 역할만 한다.
 
 
이제 이벤트를 보내보자

<template>
  <div>
		이벤트 받아랏
    <button @click="aBtn">A</button>
    <button @click="bBtn">B</button>
  </div>
</template>
<script>
import bus from '../utils/bus'
export default {
  methods: {
    aBtn() {
      // bus로 emit을 통해 이벤트를 전송
      bus.$emit('aEvent');
    },
    bBtn() {
      bus.$emit('bEvent');
    },
  }
}
</script>

 
데이터를 보내고자하는 컴포넌트에서
$emit을 활용하여 이벤트를 전송한다.
 
aEvent, bEvent를 발생
bus.$emit('aEvent');
bus.$emit('bEvent');
 
 

<template>
  <div>
    이벤트 주세요
    {{ message }}
  </div>
</template>

<script>
import bus from './utils/bus'

export default {
  name: 'App',
  data() {
    return {
      message: '',
    } 
  },
  created() {
    // 이벤트 등록
    // aEvent 이벤트가 오면 → aMethod메서드
    bus.$on('aEvent ', this.aMethod);
    // bEvent 이벤트가 오면 → bMethod메서드
    bus.$on('bEvent', this.bMethod);
  },
  methods: {
    aMethod() {
      this.message= 'aEvent를 받았어요' ;
    },
    bMethod() {
      this.message= 'bEvent를 받았어요';
    },
  },
  beforeDestroy() {
    // 이벤트 해제
    bus.$off('aEvent ', this.aMethod)
    bus.$off('bEvent', this.bMethod)
  }
}
</script>

 
이제 이벤트를 받는 컴포넌트에서 $on을 통해 이벤트를 수신한다.
 
aEvent 와 bEvent 이벤트를 등록하여 각각 aMethod와 bMethod 메서드를 수행한다.
bus.$on('aEvent ', this.aMethod)
bus.$on('bEvent', this.bMethod)
 
또한 이벤트는 등록을 하면 계속 쌓이기 때문에 꼭 해제를 해야한다.
그래서 $off를 통해 두 이벤트 모두 해제한다.
bus.$off('aEvent ', this.aMethod)
bus.$off('bEvent', this.bMethod)
 
 
끝