vue组件实现简单商品
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>
