标签：good 封装 color text app vue 组件 uni price

新建文件夹

代码转移

将需要封装的代码转移到新建的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'

组件注册

组件使用

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

标签：good,封装,color,text,app,vue,组件,uni,price
来源： https://blog.csdn.net/weixin_44135909/article/details/112424283

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。