vue3商品列表组件封装_使用vue封装单个商品

核心思想：把要显示的数据对象设计为props参数，传入什么数据对象就显示什么数据对象。

效果：组件封装后就可以实现多个页面的复用。

一、原本在页面中渲染的方式

<ul class="goods-list">
    <li v-for="goods in cate.goods" :key="goods.id">
        <RouterLink to="/" class="goods-item">
            <img v-img-lazy="goods.picture" alt="">
            <p class="name ellipsis">{{ goods.name }}</p>
            <p class="desc ellipsis">{{ goods.desc }}</p>
            <p class="price">{{ goods.price }}</p>
        </RouterLink>
    </li>
</ul>

二、封装成组件

<script setup>
defineProps({
    goods: {
        type: Object,
        default: () => {}
    }
})
</script>
 
<template>
    <RouterLink to="/" class="goods-item">
        <img v-img-lazy="goods.picture" alt="">
        <p class="name ellipsis">{{ goods.name }}</p>
        <p class="desc ellipsis">{{ goods.desc }}</p>
        <p class="price">{{ goods.price }}</p>
    </RouterLink>
</template>
 
<style lang="scss">
 
</style>

三、以组件的方式渲染

<ul class="goods-list">
    <li v-for="goods in cate.goods" :key="goods.id">
        <!-- 这个是引入组件时的组件名称 -->
        <GoodsItem :goods="goods">
    </li>
</ul>

四、封装的组件效果