建立cartcontrol元件,元件關聯到food的相關屬性，價格，數量等，所以元件要props父元件goods傳過來的food資料

export default {
    //父元件傳過來的，接收一個props屬性來計算商品的個數,food.count,去goods元件中引入cartcontrol
    props: {
        food: {
            type: Object
        }
    }

佈局：分三層，減少，數量num，增加，food.count>0時才會出現減少和數量的div

 <div class="cartcontrol">
        <transition name="fade"> <!-- 外層漸變,減號圖示-->
            <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">
                <transition name="inner"> <!-- 內層滾動，滾動時包含字型，字型在inner中-->
                    <span class="inner icon-remove_circle_outline"></span>
                </transition>
            </div>
        </transition>
        <div class="cart-count" v-show="food.count > 0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div> <!-- 加號圖示 -->
    </div>
 

在goods中引入並註冊元件，然後在模板裡應用元件，每個food的下邊都有一個加減號元件，元件應包含在content中，即在價格的右邊，並將food傳入

    <div class="price">
                 <span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
               </div>
               <div class="cartcontrol-wrapper">
                <cartcontrol v-on:cart-add="cartAdd" :food="food"></cartcontrol> <!-- 傳入food!!!-->
               </div>
 

併為cartcontrol-wrapper新增樣式，將其固定在右側

        .cartcontrol-wrapper
            position absolute
            right 0
            bottom 24px     

在加減號元件中created中logs一下food，看是否能正確拿到food的值

 created() {
       // console.log(this.food); //忘記加this
    }

接下來給cartContronl寫樣式，簡單的樣式，沒有新增動畫

之後在，加號部分新增一個點選事件，點選之後，改變food.count的值

<div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div> <!-- 加號圖示 -->

因為goods元件中用了betterScroll元件，所以我們在點選goods元件圖層上的加減號元件時，不要忘了在初始化滾動元件的時候為其新增click：true允許點選

在goods中初始化時：

     this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
       click: true,
       probeType: 3 //BScroll滾動時，能實時告訴我們滾動的位置，類似探針的效果
     });

    addCart(event) { 
            //解決PC端雙點選的問題
            if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點選
                return;
            }
            //console.log('click');//點選不生效，不要忘了在foodScroll中新增click: true 
            if (!this.food.count) {
                 //food.count是原json中不存在的屬性，不能直接新增
                //this.food.count = 1;
                Vue.set(this.food, 'count', 1);//給this.food增加一個count屬性，並初始化為1
            } else {
                this.food.count++;
            }
        }

我們發現我們新增的約束條件當food.count>0時，並沒有出現數字和減號，這是因為count是food中不存在的屬性，propty檢測不到屬性的變化， 我們要為其新增count這個屬性

import Vue from 'vue';

 Vue.set(this.food, 'count', 1);//給this.food增加一個count屬性，並初始化為1

給count新增css屬性之後，count即可出現，而且我們可以利用padding增加按鈕的點選區域

        .cart-count
            display inline-block
            vertical-align top
            width 12px
            padding-top 8px
            line-height 24px
            text-align center 
            font-size 16px
            color rgb(147,153,159)

為減號新增一個點選事件

<div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">

    decreaseCart(event) {
            //解決PC端雙點選的問題
            if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點選
                return;
            }
            if (this.food.count) {
                this.food.count--;
            }
        }

最後，為加減號新增滾動的動畫，點選加號的時候減號的按鈕時從右到左滾動過來的，這樣就有兩個動畫平移加滾動，還需要一個透明度從0到1的一個漸變過程，所以減元件需要兩個層級，外層負責平移，內層負責滾動，表示字型的層應該放到內層

        <transition name="fade"> <!-- 外層漸變,減號圖示-->
            <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">
                <transition name="inner"> <!-- 內層滾動，滾動時包含字型，字型在inner中-->
                    <span class="inner icon-remove_circle_outline"></span>
                </transition>
            </div>
        </transition>

    .cartcontrol
        font-size 0 // 消除incline-block中的空隙
        .cart-decrease, .cart-add
            display inline-block // 橫向排列
            padding 6px // 圖示較小，增加它的點選區域
            &.fade-enter-active, &.fade-leave-active //進入動畫的狀態/離開動畫時生效
                transition: all 0.4s linear
                opacity 1
                transform translate3d(0, 0, 0)
            &.fade-enter, &.fade-leave-active //動畫的開始狀態,動畫一開始透明度要設為0/離開動畫的結束狀態
                opacity: 0
                transform translate3d(24px, 0, 0)
            .inner
                display inline-block //有寬高
                line-height 24px
                font-size 24px
                vertical-align top
                color rgb(0, 160, 220, 0.2)
                &.inner-enter-active, &.inner-leave-active 
                    transition: all 0.4s linear
                    opacity 1
                    transform: rotate(0)
                &.inner-enter, &.inner-leave-active 
                    opacity: 0
                    transform  rotate(180deg)

我們通過加減號元件修改了food的count屬性，要將count的變化通知其父元件goods，然後goods通過計算得出selectFoods的變化，通知到購物車元件

首先在goods.vue中編寫selectFoods，selectFoods元件要遍歷所有的goods（計算屬性），selectFood是一個計算屬性，它觀測的就是就是goods物件，goods發生變化他會重新計算進行更新

//用data繫結goods，以便後續新增到DOM中
data() {
  return {
    goods: [],
    listHeight: [], //儲存區塊的高度
  };
}

  selectFoods() { //遍歷foods，看看選中了哪些商品
    let foods = [];
    this.goods.forEach((good) => { //先取到每一個分類
      good.foods.forEach((food) => { //後取到每一個分類下的不同food
        if (food.count) {
          foods.push(food); //兩層遍歷，取到所有被選中的foods
        }
      });
    });
    return foods; //將結果傳回到shopcart
   }
}

再將selectFoods的結果傳遞到cartcontrol（購物車）元件中，這樣，在點選加減號時改變了food的count屬性，count的變化傳回到父元件，然後在父元件中遍歷goods下的foods，就取到了所有被選中的foods，將其返回值傳遞到shopCart中，就完成了加減號與購物車的同步聯動

  <shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>

之後，為加減號新增動畫小球的特效