vue父子组件实现v-model
话不多说，直接上代码
<div >
<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方法，进而给父组件中的状态赋值。