vue3前端开发-小兔鲜项目-封装一下产品展示模块组件
vue3前端开发-小兔鲜项目-封装一下产品展示模块组件!因为这种产品展示信息的模块组件,后面我还会在其他的页面内反复使用到,所以,使用模块化开发的思路,把它单独设计成一个组件,这样可以代码复用。以后在其他的页在遇到这样的业务需求,直接调用组件就行了,里面显示什么内容,我们给他传入一个动态数据对象就行了。
1:第一步,新增一个组件,名字叫ProductItem.vue
defineProps({ goods: { type: Object, default: () => { } } }){{ goods.name }}
{{ goods.desc }}
¥{{ goods.price }}
.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; } }
2:第二步,修改之前的HomeProduct.vue的子集合渲染列表的内容。
如图,我们调用了自己刚刚定义好的一个组件。这样就可以实现代码复用了。
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。