vue父子组件传值(属性计算)实例

最近在使用ionic开发app时(基于Angular4)，做到了购物车功能，涉及到每个门店下都有各自的订单，然后每个订单下有多个商品，可以修改数量，价格和总价格及时变更。于是联想起vue，又使用vue实现了一个类似功能，父子组件传值以及属性计算的demo。

先上功能图：

image.png

demo的功能点是：每件商品做成了一个组件，组件包含商品的名称，单价，数量，以及总价格。
然后在父组件做了引用商品子组件，呈现商品列表，子组件数据变化时，并且及时从子组件传回单件商品总价。

商品子组件：Product.vue

购物车父组件Cart.vue

展示效果

image.png

这个功能比较简单：
子组件进行总价更新的时候，通过事件将对应索引的商品(或者对应商品的ID)的总价传递回来，然后父组件进行属性计算，遍历所有商品进行总价的相加，得到总金额。
涉及到了父子组件传值，属性的计算等功能，可以作为练手来熟悉这个功能。