Vue

by fergmux

HTML

<div id="app">
  <edit-contact-details @submit="text=$event"></edit-contact-details>
  <show-contact-details :text="text"></show-contact-details>
</div>

Vue

Vue.component('edit-contact-details', {
  data() {
    return {
      text: null
    }
  },
  template: `
  <form>
  	<textarea v-model="text"/>
    <input type="button" value="Submit" @click="$emit('submit', text)"/>
  </form>`
})

Vue.component('show-contact-details', {
	props: ['displayText'],
  template: `<div>{{ displayText }}</div>`
})

new Vue({
  el: "#app",
  data() {
    return {
      text: null
    }
  },
})