<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div class="container"> <my-cart></my-cart> </div> </div> <script type="text/javascript" src="./js/vue.js"></script> <script> var CartTitle = { props: ['uname'], template: ` <div class="title">{{uname}}的商品</div> ` } var CartList = { props: ['list'], template: ` <div> <div :key='item.id' v-for='item in list' class='item'> <div class='name'>{{item.name}}</div> <div class='change'> <a href="" @click.prevent='sub(item.id)'>-</a> <input type="text" class="num" :value='item.num' @blur='changeNum(item.id,$event)'> <a href="" @click.prevent='add(item.id)'>+</a> </div> <div class="del" @click='del(item.id)'>X</div> </div> </div> `, methods: { changeNum: function(id, event) { console.log(1); console.log(id, event.target.value); this.$emit('change-num', { id: id, type: 'change', num: event.target.value }) }, sub: function(id) { this.$emit('change-num', { id: id, type: 'sub' }) }, add: function(id) { this.$emit('change-num', { id: id, type: 'add' }) }, del: function(id) { console.log(id); //把id传给父亲组件 this.$emit('cart-del', id); } } } var CartTotal = { props: ['list'], template: ` <div class="total"> <span>总价{{total}}</span> <button>结算</button> </div> `, computed: { total: function() { //计算 var t = 0; this.list.forEach(item => { t += item.price * item.num; }); return t; } } } Vue.component('my-cart', { data: function() { return { uname: '张三', list: [{ id: 1, name: 'TCL彩电', price: 1000, num: 1, }, { id: 2, name: 'TCL彩电', price: 1000, num: 1, }, { id: 3, name: 'TCL彩电', price: 1000, num: 1, }, { id: 4, name: 'TCL彩电', price: 1000, num: 1, }, { id: 5, name: 'TCL彩电', price: 1000, num: 1, }, ] } }, template: ` <div class='cart'> <cart-title :uname='uname'></cart-title> <cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list> <cart-total :list='list'></cart-total> </div> `, components: { 'cart-title': CartTitle, 'cart-list': CartList, 'cart-total': CartTotal, }, methods: { changeNum: function(val) { //分为三种情况处理 输入域 加号 减好 if (val.type == 'change') { console.log(val); //根据子组件传递数据更新list对应数据 this.list.some(item => { if (item.id == val.id) { item.num = val.num; //终止 return true; } }); } else if (val.type == 'sub') { this.list.some(item => { if (item.id == val.id) { item.num -= 1; //终止 return true; } }); } else if (val.type == 'add') { this.list.some(item => { if (item.id == val.id) { item.num += 1; //终止 return true; } }); } }, delCart: function(id) { //根据id删除list数据 //找到id对应索引 var index = this.list.findIndex(item => { return item.id == id; }); //根据索引删除数据 this.list.splice(index, 1); } } }) var vm = new Vue({ el: '#app', data: { } }) </script> </body> </html>
