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示例