v-model 双向绑定实际上包含两个操作：
1、v-bind（:）：绑定value属性
2、v-on（@）：给当前元素绑定input事件
在一般的普通表单中实现：
<div id="app"> //v-model双向绑定 //<input-price v-model="price"></input-price> //手动原生态实现双向绑定 <input type="text" :value="price" @input="price=$event.target.value"> </div> Vue.component('input-price', { template: '<input type='text'>' }); new Vue({ el: '#app', data: { price: '' } });在自定义组件中的操作应该有：
1、接收一个value值
2、触发input事件，并传入新值
自定义表单中实现：
<div id="app"> //<price-input v-model="price"></price-input> //手动实现了v-model双向绑定 //3、父组件的input事件被触发，将传来的值赋给父组件的变量price //4、父组件value的值绑定到price <price-input :value="price" @input="onInput"></price-input> <p>{{price}}</p> </div> Vue.component('price-input', { // 5、将父组件的value值通过props传递给子组件 // 1、当有数据输入时触发了该组件的input事件 template: '<input :value="value" @input="updateVal($event.target.value)" type="text">', props: ["value"], methods: { updateVal: function(val) { // 2、手动触发父组件的input事件并将值传给父组件 this.$emit('input', val); } } }); var app = new Vue({ el: '#app', data: { price: '' }, methods: { onInput: function(val) { this.price = val; } } });画图表示↓
