vue实例之组件开发：购物车实现

效果图

文件目录

Index.vue：

<template>
  <div class="shopping">
    <Header />
    <Item
      v-for="item in items"
      :key="item.id"
      :item="item"
      @change-number="changeNumber"
    />
    <Footer :items="items" />
  </div>
</template>

<script>
import Header from "./Header";
import Item from "./Item";
import Footer from "./Footer";
export default {
  data() {
    return {
      items: [
        {
          id: 0,
          name: "TCL彩电",
          number: 1,
          price: 100
        },
        {
          id: 1,
          name: "机顶盒",
          number: 1,
          price: 200
        },
        {
          id: 2,
          name: "海尔冰箱",
          number: 2,
          price: 100
        },
        {
          id: 3,
          name: "小米手机",
          number: 1,
          price: 100
        },
        {
          id: 4,
          name: "PPTV电视",
          number: 1,
          price: 100
        }
      ]
    };
  },
  methods: {
    changeNumber(data) {
      const { id, type } = data;
      this.items.some((item, index) => {
        if (item.id === id) {
          if (type === "change") {
            item.number = Number(data.number);
          } else if (type === "add") {
            ++item.number;
          } else if (type === "reduce" && item.number > 0) {
            --item.number;
          } else if (type === "delete") {
            this.items.splice(index, 1);
          }

          return true;
        }
      });
    }
  },
  components: {
    Header,
    Item,
    Footer
  }
};
</script>

<style scoped>
</style>

Header.vue：

<template>
  <div class="header">
    <h1>张三的商品</h1>
  </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.header h1{
    background: #0000FF;
    color: #FFF;
    margin: 0;
}
</style>

Item.vue：

<template>
  <div class="item">
    <span class="name">{{item.name}}</span>
    <span class="operation">
      <button @click="reduceNumber">-</button>
      <input :value="item.number" @change="changeNumber" />
      <button @click="addNumber">+</button>
      <button @click="deleteProduct">x</button>
    </span>
  </div>
</template>

<script>
export default {
  props: ["item"],
  methods: {
    reduceNumber() {
      this.$emit("change-number", {
        id: this.item.id,
        type: "reduce"
      });
    },
    changeNumber(e) {
      this.$emit("change-number", {
        id: this.item.id,
        number: e.target.value,
        type: "change"
      });
    },
    addNumber() {
      this.$emit("change-number", {
        id: this.item.id,
        type: "add"
      });
    },
    deleteProduct() {
      this.$emit("change-number", {
        id: this.item.id,
        type: "delete"
      });
    }
  }
};
</script>

<style scoped>
.item {
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  justify-content: space-between;
}
</style>

Footer.vue：

<template>
  <div class="footer">
    总价：{{sum}}
    <button>结算</button>
  </div>
</template>

<script>
export default {
  props: ["items"],
  computed: {
    sum() {
      let total = 0;
      this.items.forEach(value => {
        total += value.number * value.price;
      });
      return total;
    }
  }
};
</script>

<style scoped>
.footer {
  padding-top: 5px;
  padding-bottom: 5px;
  background: #ffff00;
  color: #ff0000;
  text-align: right;
}

.footer button {
  border: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background: #ff0000;
  color: #fff;
  cursor: pointer;
}
</style>