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>