前两天老师让编写一个购物车组件,经过一段时间的努力,我的购物车终于完成了。借着这个例子,来分享按照组件方式实现业务需求的过程以及所学到的知识点。
一、按照组件方式实现业务需求的过程
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