<template>
<!-- 取餐柜 购物车组件 -->
    <div class="cartcontrol-cupboard">
    <div class="cart-decrease"  @click.prevent="decreaseCart()"><img :src="reduce" alt="" /></div>
    <div class="cart-count"  >{{items.number}}</div>
    <div class="cart-add" @click.prevent="addCart()" ><img :src="add" alt="" /></div>
    </div>
</template>

<script>
import add from "../../static/img/add.png";
import reduce from "../../static/img/reduce.png";
export default {
  name: "cartcontrol-cupboard",
  data() {
    return {
      add,
      reduce,
      number: 1,
      items: { number: 1, id: "1" }
    };
  },
  methods: {
    decreaseCart() {
      console.log("decreaseCart");
      this.$bus.emit("changeAnimate");
    },
    addCart() {
      console.log("addCart");
      this.$bus.emit("changeAnimate");
      const number = this.items.number++;
      this.$set(this.items, 0, number);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../style/mixin.scss";
.cartcontrol-cupboard {
  @include flex();
  img {
    @include size(44px, 44px);
  }
  .cart-decrease,
  .cart-add {
    padding: 20px;
  }
  .cart-count {
    @include font(26px, "#333333", "");
  }
}
</style>

vue.set

this.$set

1.  要改变的值

2.要改变的值的下标 或者属性

3.要改变的value

可以用于深度监听的一样的效果 改变vue中 内存地址不变 vue监听不到的数据变化的响应