Vue parent-child components data binding

by Oleg Voloshin

HTML

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <child @update="doSomething"></child>
  <pre v-model="childData" v-html="childData"></pre>
</div>

JavaScript

Vue.component('child', {
  data() {
    return {
    	mutableValue: 'hey from child!',
    };
  },
  props: {
  	value: String,
  },
  mounted () {
    setTimeout(() => {
      this.$emit('update', this.mutableValue);
    }, 2000);
  },
  render (h, ctx) {
    return h('p', this.value)
  }
})

new Vue({
  el: '#app',
  data: {
  	childData: 'some parent data',
  },
  methods: {
  	doSomething(payload) {
    	this.childData = payload;
    }
  }
})