vue父子組件實現v-model
阿新 • • 發佈：2018-09-03
rop hit cti 示例 ops style 多說 大致 vue
話不多說，直接上代碼
<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示例
vue父子組件實現v-model