JSFiddle - React, Tailwind, and code Playground

by ClaudeSeo

HTML

<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>

JavaScript

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
        })
    }
})