核心思想:把要显示的数据对象设计为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>