vue案例---简易购物车

需求：

        有四件商品信息存在父组件里面，需要传给子组件，在子组件渲染，子组件有增加数量和减少数量的按钮，点击按钮，对应商品的数量和价格（不是单价）会改变，父组件里面的四件商品的总价也会更改。

思路：

        把父组件的商品信息传给子组件，子组件接收后渲染到页面上，由于商品信息的样式是一样的，可以用v-for 循环商品信息；再给两个按钮绑定点击事件，控制数量的更改和价格的更改。再用计算属性计算出四种商品的总价，在update钩子函数里面使用this.$emit传值给父组件，父组件接收用自定义事件，再渲染到页面上。方法有很多种，样式也随意发挥，大家都可以尝试。

代码：

父组件代码：

<template>
  <div>
    <div class="mainBoxs">
      <Goods :info="goodsInfo" @zj="zongjia"></Goods>
      <div class="total">总价：{
   {total}}</div>
    </div>
  </div>
</template>

<script>
import Goods from "./components/Goods.vue"
export default {
  dat