封装商品列表为组件并使用

商品组件封装

<template><!-- 商品列表 --><view class="goods_list"><view class="goods_item" v-for="item in goods" :key="item.id"><image :src="item.img_url"></image><view class="price"><text>￥{{item.sell_price}}</text><text>￥{{item.market_price}}</text></view><view class="name">{{item.title}}</view></view></view>
</template><script>export default {props: ['goods'], // 接收父组件传值name: "goods-list",data() {return {};}}
</script><style lang="scss">.goods_list {padding: 0 15rpx;display: flex;flex-wrap: wrap;justify-content: space-between;.goods_item {background: #fff;width: 355rpx;margin: 10rpx 0;padding: 15rpx;box-sizing: border-box;image {width: 80%;height: 150px;display: block;margin: auto;}.price {color: $shop-color;font-size: 36rpx;margin: 20rpx 0 5rpx 0;text:nth-child(2) {color: #ccc;font-size: 28rpx;margin-left: 17rpx;text-decoration: line-through;}}.name {font-size: 28rpx;line-height: 50rpx;padding-bottom: 15rpx;padding-top: 10rpx;}}}
</style>

使用组件示例

<template><view><goods-list :goods="goods"></goods-list> </view>
</template><script>import goodsList from "../../components/goods-list/goods-list.vue"//1.导入export default {data() {return {goods: [],pageIndex: 1}},onLoad() {this.getHotGoods();},methods: {// 获取热门商品列表数据async getHotGoods() {const res = await this.$myRequest({url: '/api/getgoods?pageindex=' + this.pageIndex})this.goods = res.data.message}},components: {"goods-list": goodsList //2.注册}}
</script>