vue3 笔记-插槽

结构类似的模块，我们可以考虑用插槽，以便后续复用：

代码：

1.插槽

<script setup>
defineProps({title: {required: true,type: String},number: {required: true,type: Number}
})
</script><template><div class="px-5 py-4 rounded-lg bg-sky-400 h-fit hover:shadow-2xl transition ease-in-out duration-300"><slot name="header"><h2 class="text-white text-base mb-2">{{ title }}</h2></slot><hr class="border-gray-300 -mx-5"/><div class="pt-3 flex items-center justify-between"><slot name="number"><h2 class="font-bold text-white text-2xl hover:text-purple-600 transition ease-in-out duration-300">{{ number }}</h2></slot><span class="text-white hover:text-purple-600 transition ease-in-out duration-300"><slot name="icon"></slot></span></div></div>
</template>

2.使用插槽

<script setup>
import CardComponent from "@/components/CardComponent.vue";
</script><template><div class="flex gap-4 bg-gray-200 h-screen"><CardComponent title="文章总数" number="233" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent><CardComponent title="文章分类总数" number="23" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent><CardComponent title="标签总数" number="255" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent><CardComponent title="访问量" number="033" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent><CardComponent title="评论总数" number="987" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent></div>
</template>