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: