<div id="box"> <new-input v-model="name"></new-input> {{name}} </div> <script> Vue.component(‘new-input‘,{ props: [‘value‘], template:‘<label><input type="text" v-model="newValue" /> 你的名字:</label>‘, computed:{ newValue: { get:function() { return this.value; }, set:function(value) { this.$emit(‘input‘, value); } } }, }); new Vue({ el:‘#box‘, data: { name:‘nick‘ } }); </script>
<div id="box"> <input :value="name" @input="changeValue($event.target.value)"/> {{ name }} </div> <script> new Vue({ el:‘#box‘, data: { name:‘nick‘ }, methods:{ changeValue:function(value){ this.name = value; } } }); </script>
vue 利用v-model实现父子组件数据双向绑定 (input)
原文:https://www.cnblogs.com/zhukaijie/p/12096130.html