效果图：
组件父给子传值实现购物车效果.png
body部分：
<div class="container">
<father></father>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
//父组件
Vue.component('father',{
template:`
<table class="table table-bordered table-hover text-center">
<thead>
<tr>
<th class="text-center">编号</th>
<th class="text-center">名称</th>
<th class="text-center">单价</th>
<th class="text-center">数量</th>
<th class="text-center">小计</th>
</tr>
</thead>
<child-one v-bind:fruit='fruitList'></child-one>
</table>
`
,
data:function(){
return{
fruitList:[
{uname:'苹果',price:3,count:1,xj:3},
{uname:'香蕉',price:2,count:1,xj:2},
{uname:'鸭梨',price:1,count:1,xj:1}
]
}
}
})
子组件tbody部分：
// tbody 子组件
Vue.component('child-one',{
props:['fruit'],
template:`
<tbody>
<tr v-for="(value,index) in fruit">
<td>{{index+1}}</td>
<td>{{value.uname}}</td>
<td>{{value.price}}</td>
<td>
<button @click='res(index)'>-</button>
<span> {{value.count}}</span>
<button @click='add(index)'>+</button>
</td>
<td>{{value.xj}}</td>
</tr>
<tr>
<td colspan="5">总价:{{total}}</td>
</tr>
</tbody>
`,
data:function(){
return{
total:6
}
},
methods:{
// 数量减
res:function(index){
if(this.fruit[index].count>1){
this.fruit[index].count--;
}
// 小计减
this.fruit[index].xj=this.fruit[index].price*this.fruit[index].count;
this.getToal();
},
// 数量加
add:function(index){
this.fruit[index].count++;
// 小计加
this.fruit[index].xj=this.fruit[index].price*this.fruit[index].count;
this.getToal();
},
// 总价
getToal:function(){
for(var i=0,sum=0;i<this.fruit.length;i++){
sum+=this.fruit[i].xj;
}
this.total=sum
}
}
})
new Vue({
el:'.container'
})