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> <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> <div> <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> <p>{{message}}</p> <input type="text" v-model='message'> </div> <script> var vueApp = new Vue({ el:'#app', data:{ message:"我其实是一个语法糖" } }) </script> <div> <p>{{message}}</p> <input type="text" v-bind:value='message' @input='message = $event.target.value'> </div> <script> var vueApp = new Vue({ el: '#app', data: { message: "我其实是一个语法糖" } }) </script>
以下两种约等于：
<custom v-model='something'></custom> <custom :value="something" @input="value => { something = value }"></custom> <div> <h1>{{message}}</h1> <test-model v-model='message'></test-model> </div> <script> Vue.component('test-model', { template: ` <input v-bind:value='value' v-on:input="$emit('input', $event.target.value)">`, }) var vueApp = new Vue({ el: '#app', data: { message: '测试数据' }, }) </script>
vue实际中的应用开发就到此结束了，后续敬请期待！！！
总结
以上所述是小编给大家介绍的Vue分页效果与购物车功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: