使用Vue.js编写购物车组件（附常见错误解析、运行结果动图以及源码）

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

一、按照组件方式实现业务需求的过程

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