JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <h1>{{ foo }}</h1>
  pai: <input type="text" v-model="foo">
  <filho :meu-valor="foo" @mudou="onFilhoMudou" />
</div>

<script type="text/template" id="filho">
	<div>
   filho: <input type="text" :value="meuValor" @change="onChange">
   </div>
</script>

JavaScript

Vue.component('filho', {
	template: '#filho',
  props: ['meuValor'],
  methods: {
  	onChange(e) {
      this.$emit('mudou', e.target.value)
    }
  }
})

new Vue({
    el: '#app',
    data: {
    	foo: 'bar'
    },
    methods: {
    	onFilhoMudou(value) {
      	this.foo = value
      }
    }
})