Event Bus

// 이벤트 버스 생성 let EventBus = new Vue() // 이벤트 청취 EventBus.$on('my-event', (message) => {console.log(message)}) // 이벤트 발생 EventBus.$emit('my-event', '뾰로롱뾰롱 뾰로로롱');

<div id="sender-app"> <input type="text" v-model="text"> <button @click.prevent="sendMessage">전송</button> </div> <div id="receiver-app"> <p v-if="text">receiver: {{ text }}</p> </div>

let EventBus = new Vue() let SenderApp = new Vue({ el: '#sender-app', data () { return {text: ''} }, methods: { sendMessage () { EventBus.$emit('message', this.text) } } }) let ReceiverApp = new Vue({ el: '#receiver-app', data () { return {text: ''} }, created () { EventBus.$on('message', (text) => {this.text = text}) } })

let EventBusPlugin = {} EventBusPlugin.install = (Vue, options) => { const eventBus = new Vue() Vue.eventBus = eventBusVue.prototype.$eventBus = eventBus } export default EventBusPlugin

import EvnetBusPlugin from './plugins/bus' Vue.use(EvnetBusPlugin)

<template> <p v-if="text">Receiver: {{ text }}</p> </template> <script> export default { name: 'my-component', data () { return { text: '' } }, created () { this.$eventBus.$on('message', (text) => { this.text = text }) } } </script> <style scoped> </style>