vue父子组件实现v-model

话不多说，直接上代码

 
<div id="app">
  <price-input v-bind:value="price" v-on:input="price = arguments[0]" ></price-input>
  <price-input v-model='price' ></price-input>
  <p>{{price}}</p>
 </div>
 

 <script type="text/javascript ">
  Vue.component('price-input', {
   template: '<input :value="value " @input="updateVal" type="text ">',
   props: ["value "],
   methods: {
    updateVal: function() {
     let val = event.target.value
     this.$emit('input',val);
    }
   }
  });
  var app = new Vue({
   el: '#app',
   data: {
    price: ''
   },
  });
 </script>

大致流程为子组件的输入值改变，触发oninput方法，进而通过emit触发实例上的input方法，进而给父组件中的状态赋值。

demo示例