前两天老师让编写一个购物车组件，经过一段时间的努力，我的购物车终于完成了。借着这个例子，来分享按照组件方式实现业务需求的过程以及所学到的知识点。
一、按照组件方式实现业务需求的过程
1、明确需求：尝试完成一个购物车组件的编写
要求：
- 购物车中可以显示多种产品的名称、数量和价格
- 显示每种商品的小计（小计=单价*数量）
- 商品数量可以输入，或者用加减按钮进行变更，商品小计随数量变更而变更
- 在购物车尾部显示商品的总价
- 实现每种商品的删除操作，商品总价随之跟着改变
2、根据业务功能进行组件化划分：
- 标题组件（展示文本）
- 列表组件（列表展示、商品数量变更、商品删除）
- 结算组件（计算商品总额）
3、功能实现步骤：
- 实现整体布局和样式效果
- 划分独立的功能组件
- 组合所有的子组件形成整体结构
- 逐个实现各个组件功能（标题组件、列表组件、结算组件）
4、详细实现过程：
这是老师给的样板，我贴出来大家感受一下：
<table>
<thead>
<tr>
<th v-for="col in columns">{{col.title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td v-for="col in columns">{{item[col.field]}}</td>
</tr>
</tbody>
</table>
<div>总计：{{total}}</div>
var app = new Vue({
el:'#app',
data:{
list:[
{name:'商品1',price:100,quantity:2},
{name:'商品2',price:10,quantity:1}
],
columns:[
{
field:'name',
title:'商品名称'
},{
field:'price',
title:'价格'
},
{
field:'quantity',
title:'商品名称'
},
{
title:'小计'
}
]
},methods:{
add:function (index) {
this.list[index]['quantity']++;
}
},computed:{
total:function () {
var total = 0;
for(var i=0;i<this.list.length;i++){
var item = this.list[i];
total += item.price*item.quantity;
}
return total;
}
}
})
老师给的样板代码给了我很大的启示，（后面我会发我的代码链接）但是想到了整体布局很贴合学过的Bootstrap面板的样子，所以自作主张，把购物车这个大组件写成了三个局部组件，我感觉这样template会写得没有那么复杂，结果三个局部组件写出来，传值就让我吃了很大的苦头，因为根本没有写过局部组件，平时只有子组件和父组件，现在加上局部组件有一些力不从心，后面我会说一些我遇到的错误。下面给大家看一下运行的结果动图：
二、常见错误解析：
传值问题：因为局部组件应用不熟练，所以出现了各种的传值问题：
其中的items是我存放商品信息的json数组
解决问题的方法：
这一组数据必须在父组件中定义，然后写在局部组件的props中，然后在定义父组件template时也要进行说明。给出大家示例代码：
//这是在父组件中的定义
data:function (){
return {
items: [
{id:1,itemName: 'Vue实战', price:36.5,quantity: 1},
{id:2,itemName: '东阿阿胶', price:200,quantity: 1},
{id:3,itemName: '智能面包机',price:3008, quantity: 1},
{id:4,itemName: '佳能相机',price:5733, quantity: 1},
{id:5,itemName: '花西子口红套盒',price:599, quantity: 1}
]
}
}
//定义父组件template
template:'<div class="panel panel-success">' +
'<cart-title :username="username"></cart-title>' +
'<cart-list :items="items" :columns="columns" @change-num="changeNum($event)" @cart-del="delCart($event)">' +
'</cart-list>' +
'<cart-total :items="items"></cart-total>' +
'</div>',
//这是在局部组件中的props
props:['items']
我会把源码分享出来，如果有修改意见，可以互相交流！
扫描二维码关注公众号，回复：
10814444 查看本文章
