最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

环球关注:【首页】商品列表和单个商品组件封装

来源:博客园


(资料图片仅供参考)

一、【首页】商品列表和单个商品组件封装

1.1 完成效果为:

1.2 组件再次说明

commodityList.vue组件为:商品列表组件

commodity.vue 组件为:单个商品组件

1.3 创建文件:在components/common中创建CommodityList.vue和Commodity.vue

1.4 CommodityList.vue组件传入数据给Commodity.vue作为展示。

1.5 CommodityList.vue代码为:

<script>import commodity from "./commodity.vue"export default{data (){return {commoditylist:[{id:1,imUrl:"../../static/image/commodity1.jpg",name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imUrl:"../../static/image/commodity2.jpg",name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imUrl:"../../static/image/commodity3.jpg",name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imUrl:"../../static/image/commodity4.jpg",name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",pprice:"299",oprice:"659",discount:"5.2"}]}},components:{commodity}}</script>

1.5 Commodity.vue代码为:

<script>export default{props:{datalist:Array}}</script>

关键词: 创建文件