当前位置：首页 > VUE

vue组件实现简单商品

2026-02-21 13:01:50VUE

Vue 组件实现简单商品展示

商品数据模型 商品数据通常包含名称、价格、图片、描述等基础信息。在 Vue 中可以通过 data 或 props 传递：

data() {
  return {
    product: {
      name: '示例商品',
      price: 99.99,
      image: 'https://example.com/product.jpg',
      description: '这是一个示例商品描述'
    }
  }
}

基础组件结构 使用 template 定义商品卡片布局，通过插值语法绑定数据：

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

样式处理 通过 scoped 样式隔离组件 CSS：

<style scoped>
.product-card {
  border: 1px solid #ddd;
  padding: 15px;
  max-width: 300px;
}
.price {
  color: #f56c6c;
  font-weight: bold;
}
</style>

交互功能实现 在 methods 中定义购物车交互逻辑：

methods: {
  addToCart() {
    this.$emit('add-to-cart', this.product)
  }
}

组件复用方案 通过 props 实现动态数据传入，使组件可复用：

props: {
  product: {
    type: Object,
    required: true
  }
}

完整组件示例 整合后的单文件组件 (SFC) 示例：

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

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  methods: {
    addToCart() {
      this.$emit('add-to-cart', this.product)
    }
  }
}
</script>

<style scoped>
.product-card {
  border: 1px solid #ddd;
  padding: 15px;
  max-width: 300px;
}
.price {
  color: #f56c6c;
  font-weight: bold;
}
</style>

vue组件实现简单商品