新建文件夹
代码转移
将需要封装的代码转移到新建的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'
组件注册
组件使用
