v-model双向绑定实际上是通过子组件中$emit方法派发的input事件，父组件监听input事件中传递的value值，并存储在父组件data中，然后父组件通过prop的形式传递给子组件value值，在子组件中绑定Input的value属性。
代码：
// 父组件
<myDa :value="value" @input="value=$event"></my-comp>:value = “value”
<input type="text" @input="$emit('input', $event.target.value)" :value="value">子组件使用监听事件使用
emit(eventName)触发事件
购物车最终代码：
<div id="app">
<div v-for="goods in goodslist">
<p>商品名称：{{goods.name}}</p>
<p>单价:{{goods.price}}</p>
<cart-component v-model="goods.count">
</cart-component>
<hr>
</div><div>
订单总金额：{{amount}}元
</div>
</div><template id="cart-component">
<div class="cart">
<button @click="count--; updateCount();">
-
</button>
<input type="text" v-model="count"
@input=updateCount()">
<button @click="count++; updateCount();">
+
</button>
</div>
</template>
<script>
// 定义组件
const CartComponent = {
name: 'Cart',
template: '#cart-component',
// 在组件中不可直接修改props数据
props: ['value'],
data: function() {
return {
count: this.value
};
},
methods: {
// v-model指令双向绑定,修改父组件内容
updateCount: function() {
// 触发input事件
this.$emit('input',this.count);
}
}
};
// 创建vue实例对象
const app = new Vue({
el: '#app',
data: {
goodslist; [{
name: 'apple',
price: 2,
count: 2
},{
name: 'dada'，
price: 222222222222,
count: 0
}] },
computed: {
// 当前订单总金额
amount: function(){
var money=0
this.goodslist.forEach(goods=>{
money += pareseInt(goods.count) * parseInt(goods.price);
});
return money;
}
},
components: {
CartComponent
}
});
</script>
vue:自定义组件中v-model以及父子组件的双向绑定
<div id="app">
<p>{{message}}</p>
<input type="text" v-model='message'>
</div>
<script>
var vueApp = new Vue({
el:'#app',
data:{
message:"我其实是一个语法糖"
}
})
</script>
<div id="app">
<p>{{message}}</p>
