步骤一、规划结构
结构一般是一整个大的功能模块为一个父组件，里面小的功能分区为子组件，下面就把购物车整体作为父组件cart，里面包含了cart-header、cart-list和cart-footer三个子组件，在下面样式里分别写成了粉色、绿色和卡其色以方便区分。
搭建好基本框架后三个子组件先统一在父组件上树方便下面写样式时在页面查看整体效果。
步骤二、建立模板（写样式）
样式如上，代码如下。
步骤三、实现功能
头尾两个组件的功能比较简单，先写；中间购物列表的功能稍复杂，后面写。因为多个功能需要用到相同的数据来实现操作而这些功能分布在不同子组件所以数据统一放在父组件，子组件需要这些数据时就props获取。
然后开始写第一个子组件cart-header。
第三个子组件cart-footer，这里有一个计算总价的功能。
最后第二个组件cart-list。
首先从父组件cart获取商品列表的数据。
v-for将获取到的数据填充到模板。
功能实现部分这里要实现的主要功能其实就是商品列表商品数量的变化以及删除，无论是减号、加号还是输入域都是对商品的数量进行操作，所以这里将这三项功能归纳在一个事件函数changeNum( )里减少代码量提高性能，这样一来changeNum()比较复杂，第一步先实现简单的删除功能itemDel( )。
子组件是不直接操作父组件数据的（因为Vue的设计是单向数据流，父组件是一对多的，如果有多个子组件props获取了父组件的同一数据，如果其中某个子组件操作这个数据的话就会让全盘数据乱套，所以在Vue中数据只能自上往下流动。），所以所有的按键都只是起到了一个数据传递的作用，将数据传回到父组件通知父组件进行具体的操作。
利用商品列表中的id作为索引来实现删除按钮的功能。在子组件中获取到id然后传参到父组件，父组件接收参数后利用数组方法splice将对应id的商品数据删除。后面其他子组件功能的实现也都是这个套路，在子组件将数据传参到父组件后有父组件统一具体实现功能。
输入域功能不能用v-model实现因为数据来源不是子组件本身自带的data而是来自于props传过来的父组件的data。利用blur事件，使输入域在失去焦点时进行数据更新。同样，这里子组件只负责传参，父组件来实行具体的操作逻辑。
这里传递的两个参数分别是系要数据更新的项对应的id以及输入域中被输入的新数据，输入域中被输入的新数据利用事件对象$event传参。
这里将数据传给父组件后父组件要做的就是将数据更新到原本的list里，具体操作是用数组方法some()来遍历出list中需要更新的项后进行数据更新即可，注意，使用some()方法最后需要return true来终止一下遍历，这是some方法的使用规则，记住就好。
然后是加号减号功能的实现，因为无论是加号减号还是输入域，功能都是改变商品数量，所以可以用一个事件概括起来，再在事件中细分每个部分的功能，在子组件传参时添加一个类型属性来作为区分逻辑的判断依据即可。
