07首页商品列表和单个商品组件封装

最新推荐文章于 2024-06-14 10:39:01 发布

Dreamer_gwh

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量158

点赞数

分类专栏： uniapp 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45529137/article/details/126674900

版权

1. 完成效果

在这里插入图片描述

2.代码

组件说明
CommodityList.vue组件为：商品列表组件
Commodity.vue 组件为：单个商品组件
创建文件：在components/common中创建CommodityList.vue和Commodity.vue
CommodityList.vue组件传入数据给Commodity.vue作为展示。

CommodityList.vue代码

<template>
	<view class='commodity-list'>
		
		<!-- 商品列表组件 -->
		<Commodity :dataList='commodityList'></Commodity>
		
	</view>
</template>

<script>
import Commodity from './Commodity.vue'
export default {
	data () {
		return {
			commodityList:[
				{
					id:1,
					imgUrl:"../../static/img/commodity1.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",