Vue实现简易购物车
vue版的购物车也是主要考察子父组件之间的通讯问题，也是vue中比较重要的一点。主要是通过给子组件绑定一个自定义事件，然后在子组件内部使用$emit触发这个事件，达到通讯的目的，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{
list-style: none;
}
#app{
height:auto;
width:800px;
margin: 50px auto;
}
li{
padding:10px 0;
display: flex;
flex:1;
justify-content:space-around;
}
button{
height:30px;
width:50px;
}
</style>
</head>
<body>
<div id="app">
<list :list="goodsList" @del="del"></list>
<p>总价: {{total}} </p>
</div>
</body>
<script>
var many={
props:["count","m"],
methods: {
handleChange(type){
this.$emit("oncount",type,this.m)
}
},
template:`
<div>
<button @click="handleChange('sub')">-</button>
<span>{{count}}</span>
<button @click="handleChange('add')">+</button>
</div>
`
}
var list={
props:["list"],
methods: {
handlecount(type,m){
if(type=="add"){
m.count+=1;
}else if(type=="sub" && m.count){
m.count-=1;
}
m.sum=m.count*m.price//控制总价
},
handledel(m){
this.$emit("del",m)
}
},
template:`
<ul>
<li v-for="m in list" :key="m.id">
<span>{{m.goodsName}}</span>
<span>{{m.price}}</span>
<many @oncount="handlecount" :count="m.count" :m="m"></many>
<span>{{m.sum}}</span>
<button @click="handledel(m)">删除</button>
</li>
</ul>
`,
components:{
many
}
}
var app=new Vue({
el:"#app",
data:{
goodsList:[{
id:"CD001",
goodsName:"iphoneX",
price:300,
count:1,
sum:300
},{
id:"CD002",
goodsName:"vivo",
price:250,
count:3,
sum:750
},{
id:"CD003",
goodsName:"xiaomi",
price:200,
count:1,
sum:200
},{
id:"CD004",
goodsName:"oppo",
price:120,
count:4,
sum:480
}],
},
methods: {
del(m){
this.goodsList = this.goodsList.filter((item)=>{
return m != item
})
}
},
computed:{
total(){
return this.goodsList.reduce((total,item)=>{
return total += item.sum
},0)
}
},
components:{
list
}
})
</script>
</html>
