当前位置：首页 > VUE

vue组件实现简单商品

2026-01-20 21:24:16VUE

Vue组件实现简单商品展示

1. 创建商品组件 新建一个Vue单文件组件如ProductItem.vue，包含商品图片、名称、价格和购买按钮等基础元素。

<template>
  <div class="product">
    <img :src="product.image" :alt="product.name">
    <h3>{{ product.name }}</h3>
    <p class="price">¥{{ product.price }}</p>
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

2. 定义商品数据 通过props接收商品数据对象，包含必要字段如id、name、price等。

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true,
      default: () => ({
        id: 0,
        name: '默认商品',
        price: 0,
        image: ''
      })
    }
  },
  methods: {
    addToCart() {
      this.$emit('add-to-cart', this.product)
    }
  }
}
</script>

3. 添加基础样式 为商品组件添加CSS样式，确保布局美观。

<style scoped>
.product {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px;
  width: 200px;
  text-align: center;
}
.product img {
  max-width: 100%;
  height: 150px;
  object-fit: cover;
}
.price {
  color: #e63946;
  font-weight: bold;
}
button {
  background: #2a9d8f;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
}
</style>

4. 在父组件中使用 创建商品列表父组件，循环渲染多个商品项。

<template>
  <div class="product-list">
    <ProductItem 
      v-for="item in products" 
      :key="item.id" 
      :product="item"
      @add-to-cart="handleAddToCart"
    />
  </div>
</template>

<script>
import ProductItem from './ProductItem.vue'

export default {
  components: { ProductItem },
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 99, image: 'url1' },
        { id: 2, name: '商品B', price: 199, image: 'url2' }
      ]
    }
  },
  methods: {
    handleAddToCart(product) {
      console.log('添加商品:', product)
    }
  }
}
</script>

5. 扩展功能建议

vue组件实现简单商品