[Vue.js] EventBus에서 this 쓰는 법

Vue.js 에서 컴포넌트끼리 데이터를 주고받기 위해서는 크게 세가지 방법이 있다.

1. props
2. Vuex
3. EventBus

props는 부모 자식 컴포넌트간에 가능한 것이고,
Vuex는 조금은 큰 규모 프로젝트에 적합한 것이고,
EventBus는 변수를 전역으로 사용할 수 있고 간편한 구조로 되어있고, 중소규모의 프로젝트에 적합하기 때문에

EventBus를 한번 사용해보았다.

간단하게 사용법을 쓰자면,

우선, 이벤트 버스로 사용할 모듈을 하나 만든다.

//event-bus.js

import Vue from 'vue';

const EventBus = new Vue();
export default EventBus;

필요한 곳에서 import해서 데이터를 보내거나 받는다.

//blahblah.vue
import EventBus from './event-bus';

Vue.component('myComponent', {
  ...
  methods: {
    emitMethod () {
      EventBus.$emit('EVENT_NAME', payLoad);
      //이름, 값으로 보내는 방법.
    }
  }
});

//aloha.vue
import EventBus from './event-bus';

Vue.component('myComponent', {
  ...
  created: function(){
		EventBus.$on('EVENT_NAME', function(data){
          //이벤트 이름과 파라미터로 보낸 값을 받는 방법.
			this.obj = data;
		}.bind(this));
  }
});

근데 이제 여기서 Eventbus function안에서 this를 호출하면 EventBus 자기 자신이 되거나 parent로 호출하면 Window 객체가 읽힌다는 것!! 따라서 컴포넌트 자기 자신을 호출하기 위해서는 bind(this)를 통해 자기 자신을 바인딩해줘야 한다.

출처 : https://holecjh.tistory.com/189