VUE2.0 饿了么学习笔记（10）加减号组件cartcontrol

1）新建文件夹和vue
2）去goods中引入（import）和注册（components），之后就可以在goods中使用<cartcontrol></cartcontrol>
3)cartcontrol中要对food进行处理，将food传入cartcontrol组件<cartcontrol :food="food"></cartcontrol>，foods是created()函数从json中获得的,food是  <li v-for="item in goods" :key="item.id" class="food-list food-list-hook">获得的单个商品的属性

4）之后cartcontrol组件接收food

 //父组件传过来的，接收一个props属性来计算商品的个数,food.count,去goods组件中引入cartcontrol
    props: {
        food: {
            type: Object
        }
    },

可在 created() {
       // console.log(this.food); //忘记加this

    },中测试food时候成功传递

5）5）为加减号添加点击事件addCart(event){}h和decreaseCart(event) {}，函数中解决PC端双击问题，并this.food.count++或者this.food.count--,其中food.count是原来food属性中没有的，在addCart(){}方法中通过Vue.set添加，不要忘了import Vue

 methods: {
        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++;
            }
//设置滚动对象时，点击加号，设置一个派发事件，将DOM对象传出去,将target（DOM）作为cart.add事件的对象传入
//$emit, $on, $off 分别来分发、监听、取消监听事件：
            this.$emit('cart-add', event.target);
        },
        decreaseCart(event) {
            //解决PC端双点击的问题
            if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
                return;
            }
            if (this.food.count) {
                this.food.count--;
            }
        }
    }
};

6）中间涉及样式加载（没写）vertical-align:top 不要忘了在goods中添加cartcontrol的样式，放在每个food的右侧，否则无法正确显示

7）goods和cartcontrol的联动，在cartcontrol点击添加或者减少，下方购物车发生变化

两个组件的联动过程：主要在于点击加减号引起的selectFoods数组的刷新
cartcontrol--->foods.vue(刷新selectFoods)--->shopcart(props接收selectFoods数据，并修改购物车状态)
cartcontrol中的food是父组件foods中传过来的属性，点击cartcontrol中的加减号就是修改food本身，之后就会影响到父组件(goods组件)即 <cartcontrol :food="food"></cartcontrol>，foods的改变还要体现在下方的购物车中，即购物车中商品数量和是否结算的状态，我们通过计算属性selectFoods来实现，主要作用是遍历goods，在cartcontrol改变了goods之后对goods进行刷新，返回新的foods，并在<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart> 中传回给shopcart进行更新，这样就实现了加减商品和购物车的联动。ref="shopcart"是在父组件调用子组件函数时用的，即this.$refs.shopcart.drop(el);

goods.vue中

 selectFoods() { //遍历foods，看看选中了哪些商品
    let foods = [];
    this.goods.forEach((good) => { //先取到每一个分类
      good.foods.forEach((food) => { //后取到每一个分类下的不同food
        if (food.count) {
          foods.push(food); //两层遍历，取到所有被选中的foods
        }
      });
    });
    return foods; //将结果传回到shopcart
   }

shopcart.vue中

 props: {
            selectFoods: { //保存一个被选择商品的数组,包括被选择商品的单价和数量
                type: Array,
                default() {
                    return [{
                      //  price: 10,
                       // count: 2
                    }];
                }
            },

}