Vue.js (EventBus)

eventbus : 메서드들을 서로 호출할 수 있도록 하는 방법

사용 이유

일반적인 메서드 : 한 오브젝트나 컴포넌트 단위로 묶어서 사용되기 때문에 이벤트를 사용할 필요 없이 현재 위치에 포함된 메서드/변수를 호출하여 사용 가능

공통으로 데이터를 주고 받을 수 있는 공간을 만들고, 이를 통해서 규격에 맞춰 데이터들을 주고 받을려면 eventbut 사용

// vue.js

// 이벤트 생성
var EventBus = new Vue()

// 이벤트 발행
EventBut.$emit('message', 'hello world');

// 이벤트 구독
EventBus.$on('message', function(text) {
    console.log(text);
}); 

<컴포넌트간 이벤트 주고받기>

// 컴포넌트 한단계 위의 단계인 VueApp간의 이벤트 공유 예제

<div id="sender-app">
    <input v-model="text">
    <button @click="sender">sender</button>
    <div v-if="receiveText">#sender-app: I sent a message a </div>
</div>
<div id="receiver-app">
    <div v-if="text">#receiver-app: </div>
</div>

-------------------------------------------------------------------------

var EventBus = new Vue();

var SenderApp = new Vue({
    el: '#sender-app',
    data() {
    	return {
            text: '',
            receiveText: ''
        }
    },
    created() {
    	EventBus.$on('message', this.onReceive);
    },
    methods: {
    	sender() {
            EventBus.$emit('message', this.text);
            this.text = '';
        },
        onReceive(text) {
            this.receiveText = text;
        }
    }
});

var ReceiverApp = new Vue({
    el: '#receiver-app',
    data() {
    	return {
            text: ''
        }
    },
    created() {
    	EventBus.$on('message', this.onReceive);
    },
    methods: {
    	onReceive(text) {
            this.text = text;
        }
    }
});

SenderApp과 ReceivarApp은 서로 다르지만 EventBus를 통해 이벤트 공유가 가능한 것을 확인 할 수있다.