【Vue3】名前付きスロットの使い方

コード

App.vue

<template>
  <CardTemplate>
    <template #body>
      <!-- 表示させたいパーツを書く -->
      <span>中身</span>
    </template>
    <template #footer>
      <span>フッター</span>
    </template>
  </CardTemplate>
</template>

<script setup>
import CardTemplate from 'CardTemplate.vue'
</script>

CardTemplate.vue

<template>
  <v-card>
    <v-card-title>タイトル</v-card-title>
    <v-card-text>
      <slot name="body"></slot>
    </v-card-text>
    <v-card-actions>
      <slot name="footer"></slot>
    </v-card-actions>
  </v-card>
</template>

スロット名は任意。今回はbodyとfooterにした。

参考