vue3前端开发-小兔鲜项目-封装一下产品展示模块组件

vue3前端开发-小兔鲜项目-封装一下产品展示模块组件！因为这种产品展示信息的模块组件，后面我还会在其他的页面内反复使用到，所以，使用模块化开发的思路，把它单独设计成一个组件，这样可以代码复用。以后在其他的页在遇到这样的业务需求，直接调用组件就行了，里面显示什么内容，我们给他传入一个动态数据对象就行了。

1：第一步，新增一个组件，名字叫ProductItem.vue


<script setup>
defineProps({goods: {type: Object,default: () => { }}
})
</script><template><RouterLink to="/" class="goods-item"><img :src="goods.picture" alt="" /><p class="name ellipsis">{{ goods.name }}</p><p class="desc ellipsis">{{ goods.desc }}</p><p class="price">&yen;{{ goods.price }}</p></RouterLink>
</template><style scoped lang="scss">
.goods-item {display: block;width: 220px;padding: 20px 30px;text-align: center;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 160px;height: 160px;}p {padding-top: 10px;}.name {font-size: 16px;}.desc {color: #999;height: 29px;}.price {color: $priceColor;font-size: 20px;}
}
</style>

2:第二步，修改之前的HomeProduct.vue的子集合渲染列表的内容。