vue父子组件实现v-model
Posted zale-blogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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方法，进而给父组件中的状态赋值。
以上是关于vue父子组件实现v-model的主要内容，如果未能解决你的问题，请参考以下文章