（十）实现购物车中的对商品的数量选择操作

深藏阁楼爱情的钟 2022-05-25 00:22 151阅读 0赞

实现购物车中的对商品的数量选择操作，如图1所示，当一开始的时候，界面最右侧只有一个“+”按钮；当点击右侧任意一个“+”按钮的时候，点击的食品的相应地方会出现“-”按钮，并且出现添加的数量，如图2所示；当在点击其他食品的“+”按钮的时候，也会出现点击的食品的相应地方会出现“-”按钮，并且出现添加的数量，同时底部购物车相应的地方也会做出变化，如 图3所示。

![20180504145040875][]

图1

![20180504145057258][]

图2

![20180504145107806][]

图3

下面我们就详细的讲解上述联动的效果是如何实现的。

将右侧的“+”和“-”以及两者之间的数字抽成一个组件，叫做cartControl.vue

1、cartControl.vue的<template>的内容如下，这里用到vue中的内置组件<transition>实现过渡效果

<template>
        <div class="cartControl">
          
          <transition name="move">
            
            <div class="cartDecrease" v-show="food.count>0" @click="decreaseCart">
              <span class="inner icon-remove_circle_outline"></span>
            </div>
          </transition>
          <div class="cartCount" v-show="food.count>0">{
       {food.count}}</div>
          
          <div class="cartAdd icon-add_circle" @click="addCart"></div>
        </div>
    </template>

2、cartControl.vue的<script>内容 如下，在这里的数据都是基于food对象，即每一种食品

这里有用到从父组件传递过来的数据food，所以要在goods.vue中引入并使用cart-control组件，在里面绑定属性food，下图是goods.vue 文件中的修改

在<script>中引入该组件并在components中注册该组件

![2018050415134348][]

在<template>中引入该组件

<cart-control :food="food"></cart-control>

3、cartControl.vue中的<style>里面的内容

由于在子组件cartControl中有将父组件传递过来的food对象添加属性count，当count在cartControl.vue中变化的时候，会自动反映到父组件goods.vue中的food

由于，要将变化的food的属性要反映到shopCart.vue 中，所以需要对goods.vue中的<shop-cart>绑定属性select-foods，如

<shop-cart :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"><Shop-cart>

selectFoods在goods.vue中的computed中的定义如下：

//  选中的商品，返回一个数组，数组的成员是有count属性的会是已经加入购物车的商品
            selectFoods(){
              let foods = [];
              this.goods.forEach((good) => {
                good.foods.forEach((food) => {
                // 对每一个商品的count属性进行遍历
                //  count在cartControl.vue中有定义，会影响到父组件的
                  if(food.count){
                  //  证明该食品有添加到购物车
                  //  找到所有被选择的food
                    foods.push(food);
                  }
                });
              });
              return foods;
            }
          }

count属性是在cartControl.vue中添加的，在子组件对父组件传递过来的数据的修改会反映到父组件上面，所以在父组件可以对每一样good下面的每一样的food遍历，当food下面有count属性的时候，说面该food已经被添加到购物车了

在shopCart.vue中需要对属性select-foods做声明：

![2018050415301973][]

**注意: **在父组件good.vue中绑定属性用横划线的写法select-foods，而在s子组件shopCart.vue中声明该属性的时候，用的是驼峰写法selectFoods

[20180504145040875]: /images/20220525/e0b8a0da957140a89a911507cb857134.png
[20180504145057258]: /images/20220525/ee6b8dba2a3543a898b5457dbce5c504.png
[20180504145107806]: /images/20220525/b9576239fc684b7abf794541c6885af5.png
[2018050415134348]: /images/20220525/e4e03fd354424d0295f633e51b4e9a01.png
[2018050415301973]: /images/20220525/2d9a482906e5498dabd61ce41cff3bf3.png