主要是使用插槽的知识以及父子组件传值的知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="./vue.js"></script>
<style type="text/css">
.container {
margin: auto;
width: 1200px;
}
.container .cart {
width: 1200px;
}
.container .title {
background-color: lightblue;
height: 40px;
line-height: 40px;
text-align: center;
/*color: #fff;*/
}
.container .total {
background-color: #ccc;
height: 50px;
line-height: 50px;
text-align: right;
}
.container .total button {
margin: 0 10px;
background-color: seagreen;
height: 35px;
width: 80px;
border: 0;
outline: none;
cursor: pointer;
}
.container .total span {
color: red;
font-weight: bold;
}
.container .item {
height: 55px;
line-height: 55px;
position: relative;
border-top: 1px solid #ADD8E6;
}
.container .item img {
width: 45px;
height: 45px;
margin: 5px;
}
.container .item .name {
position: absolute;
width: 90px;
top: 0;
left: 55px;
font-size: 16px;
}
.container .item .change {
width: 100px;
position: absolute;
top: 0;
right: 50px;
}
.container .item .change a {
font-size: 20px;
width: 30px;
text-decoration: none;
background-color: lightgray;
vertical-align: middle;
}
.container .item .change .num {
text-align: center;
width: 40px;
height: 25px;
}
.container .item .del {
position: absolute;
top: 0;
right: 0px;
width: 40px;
text-align: center;
font-size: 40px;
cursor: pointer;
color: red;
}
.container .item .del:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<mycart></mycart>
</div>
</div>
</div>
<script>
var Ctitle = {
props:["uname"],
template: `
<div class="cart">
<div class="title" >{{uname}}的购物车</div>
</div>
`
}
var Clist = {
props:["list"],
template: `
<div>
<div class="item" v-for="v in list" :key="v.id">
<div class="name">{{v.goodsname}}</div>{{v.price}}元
<div class="change">
<a href="javascript:void(0);" @click="v.num>0?v.num--:0">-</a>
<input type="text" class="num" v-model="v.num"/>
<a href="javascript:void(0);" @click="v.num++">+</a>
</div>
<div class="del" @click="del(v.id)">×</div>
</div>
</div>
`,
methods: {
del(id){
this.$emit("del",id);
},
total(num){
this.$emit("total",num)
}
},
}
var Ctotal = {
props:["list"],
template: `
<div class="total">
<span>总价:{{total}}</span>
<button @click="get(total)">结算</button>
</div>
`,
computed:{
total(){
// 计算总价
var t= 0;
this.list.forEach(item => {
t+=item.price * item.num;
});
return t;
}
},
methods: {
// 子组件向父组件发送总价格
get(total){
// console.log("z"+total);
this.$emit("total",total)
}
},
}
Vue.component("mycart", {
// 父组件
data:function(){
return{
uname:"张三",
list: [
{ id: 1, goodsname: "水杯", num: 2, price: 10 },
{ id: 2, goodsname: "汽水", num: 2, price: 2 },
{ id: 3, goodsname: "矿泉水", num: 2, price: 3 },
{ id: 4, goodsname: "白酒", num: 2, price: 20 },
{ id: 5, goodsname: "洗衣液", num: 2, price: 15 },
]
}
},
template: `
<div>
<Ctitle :uname="uname" ></Ctitle>
<Clist :list="list" @del=del($event)></Clist>
<Ctotal :list="list" @total="total($event)"></Ctotal>
</div>
`,
components: {
Ctitle,
Clist,
Ctotal
},
methods:{
del(id){
console.log("父组件的id--->",id);
var index = this.list.findIndex((item)=>{
return item.id == id;
})
// 根据索引删除
this.list.splice(index,1)
},
total(t){
// 父组件接收总价格
alert("商品总价为:"+t+"元")
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
</html>
实现效果