新建文件夹

代码转移

将需要封装的代码转移到新建的vue文件（此为goodList.vue）

<template>
	<view class="good-list">
		<view class="good-item" v-for="items in hotgoods" :key="items.id">
			<image src=""></image>
			<view class="price">
				<text>{{items.sell_price}}</text>
				<text>{{items.market_price}}</text>
				<view class="good-name">{{items.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['hotgoods']
	}
</script>

<style lang="scss">
	
		.good-list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 15rpx;
			justify-content: space-between;

			.good-item {
				background-color: #FFFFFF;
				width: 350rpx;
				margin-top: 10rpx;

				image {
					width: 80%;
					height: 150rpx;
				}

				.price {
					text {
						color: #B50E03;
					}

					text:nth-child(2) {
						margin-left: 5rpx;
						color: #808080;
						text-decoration: line-through;
						font-size: 15rpx;
					}

					.good-name {
						font-size: 20rpx;
					}
				}
			}
		}
	
</style>

代码说明

使用此组件的传值 接口为

<script>
	export default {
		props: ['hotgoods']
	}
</script>

prop中的参数“hotgoods" 要与 所需参数一致

组件引入

import goodslist from '../../compoents/good-list/goodList.vue'

组件注册

组件使用

我会陆续写一些有关的此类文章 有任何问题评论区见~