EventBus Example in vue.js

by cheongjin kim

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js" charset="utf-8"></script>

<div id="sender-app">
	<input v-model="text">
	<button @click="sender">sender</button>
    <div v-if="receiveText">I sent a message a {{ receiveText }}</div>
</div>
<div id="receive-app">
	<div>{{ text }}</div>
</div>

JavaScript

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 ReceiveApp = new Vue({
	el: '#receive-app',
    data() {
    	return {
        	text: ''
        }
    },
	created() {
    	EventBus.$on('message', this.onReceive);
    },
    methods: {
    	onReceive(text) {
        	this.text = text;
        }
    }
});