最新要闻

广告

手机

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

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

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

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

家电

  1. 首页
  2. 移动通信
  3. 内容

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

来源：博客园


(资料图片仅供参考)

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

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>

关键词： 创建文件