vue2用组件实现一个商品列表页

1. 创建一个商品列表组件

<template>
  <div class="product-list">
    <div v-for="(product, index) in products" :key="product.id" class="product-item">
      <img :src="product.image" :alt="product.name" />
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <span class="price">{{ product.price }}</span>
      <button @click="addToCart(product)">Add to Cart</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductList",
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  methods: {
    addToCart(product) {
      this.$emit("add-to-cart", product);
    }
  }
};
</script>

<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 300px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.product-item img {
  height: 200px;
  width: 200px;
  object-fit: cover;
}

.product-item h3 {
  margin-top: 10px;
  margin-bottom: 5px;
}

.product-item p {
  margin-top: 0;
  margin-bottom: 10px;
}

.price {
  font-weight: bold;
  font-size: 20px;
}
</style>

2. 在父组件中使用商品列表组件

<template>
  <div class="app">
    <product-list :products="products" @add-to-cart="addToCart"></product-list>
    <cart :items="cart" @remove-item="removeFromCart"></cart>
  </div>
</template>

<script>
import ProductList from "./ProductList.vue";
import Cart from "./Cart.vue";

export default {
  name: "App",
  components: {
    ProductList,
    Cart
  },
  data() {
    return {
      products: [
        {
          id: 1,
          name: "Product 1",
          description: "This is product 1",
          price: 9.99,
          image: "https://placehold.it/200x200"
        },
        {
          id: 2,
          name: "Product 2",
          description: "This is product 2",
          price: 19.99,
          image: "https://placehold.it/200x200"
        },
        {
          id: 3,
          name: "Product 3",
          description: "This is product 3",
          price: 29.99,
          image: "https://placehold.it/200x200"
        },
        {
          id: 4,
          name: "Product 4",
          description: "This is product 4",
          price: 39.99,
          image: "https://placehold.it/200x200"
        }
      ],
      cart: []
    };
  },
  methods: {
    addToCart(product) {
      this.cart.push(product);
    },
    removeFromCart(index) {
      this.cart.splice(index, 1);
    }
  }
};
</script>

<style>
.app {
  margin: 20px;
}
</style>

3. 创建一个购物车组件

<template>
  <div class="cart">
    <h2>Shopping Cart</h2>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        <span>{{ item.name }}</span>
        <span class="price">{{ item.price }}</span>
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Cart",
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    removeItem(index) {
      this.$emit("remove-item", index);
    }
  }
};
</script>

<style>
.cart {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
}

.cart h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.cart ul {
  list-style-type: none;
  padding: 0;
}

.cart li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.cart .price {
  font-weight: bold;
  font-size: 16px;
}
</style>