コンポーネント共通化の秘伝の方法

<template>
  <v-card class="mx-auto">
    <v-img
      src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
      height="200px"
    ></v-img>
    <v-list-item class="grow">
      <v-list-item-avatar color="grey darken-3">
        <v-img
          class="elevation-6"
          src="https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"
        ></v-img>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title>Evan You</v-list-item-title>
      </v-list-item-content>
      <v-spacer></v-spacer>
      <v-rating
        :value="1"
        dense
        small
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
    </v-list-item>
    <v-card-title> Top western road trips </v-card-title>
    <v-card-subtitle> 1,000 miles of wonder </v-card-subtitle>
    <v-card-actions>
      <v-btn color="orange lighten-2" text> Explore </v-btn>
      <v-spacer></v-spacer>
      <v-btn icon @click="show = !show">
        <v-icon>{{ show ? "mdi-chevron-up" : "mdi-chevron-down" }}</v-icon>
      </v-btn>
    </v-card-actions>
    <v-expand-transition>
      <div v-show="show">
        <v-divider></v-divider>
        <v-card-text>
          I'm a thing. But, like most politicians, he promised more than he
          could deliver. You won't have time for sleeping, soldier, not with all
          the bed making you'll be doing. Then we'll go with that data file!
          Hey, you add a one and two zeros to that or we walk! You're going to
          do his laundry? I've got to find a way to escape.
        </v-card-text>
      </div>
    </v-expand-transition>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      show: false,
    };
  },
});
</script>

<template>
  <v-card class="mx-auto">
    <v-img
      class="white--text align-end"
      height="200px"
      src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
    ></v-img>
    <v-list-item class="grow">
      <v-list-item-avatar color="grey darken-3">
        <v-avatar color="indigo">
          <v-icon dark> mdi-account-circle </v-icon>
        </v-avatar>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title>Alice</v-list-item-title>
      </v-list-item-content>
      <v-spacer></v-spacer>
      <v-rating
        :value="3"
        dense
        small
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
    </v-list-item>
    <v-card-subtitle class="pb-0"> Number 10 </v-card-subtitle>
    <v-card-text class="text--primary">
      <div>Whitehaven Beach</div>
      <div>Whitsunday Island, Whitsunday Islands</div>
    </v-card-text>
    <v-card-actions>
      <v-text-field placeholder="Input send message"></v-text-field>
      <v-btn text color="orange" class="ml-auto">Send</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({});
</script>

<template>
  <v-card class="mx-auto">
    <v-img height="200px" :class="imgClass" :src="imgUrl"></v-img>
    <v-list-item class="grow">
      <v-list-item-avatar color="grey darken-3">
        <slot name="avatar"></slot>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title>{{ name }}</v-list-item-title>
      </v-list-item-content>
      <v-spacer></v-spacer>
      <v-rating
        :value="rating"
        dense
        small
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
    </v-list-item>
    <slot name="content"></slot>
    <v-card-actions>
      <slot name="actions"></slot>
    </v-card-actions>
    <slot name="footer"></slot>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    imgClass: { type: String },
    imgUrl: { type: String },
    name: { type: String },
    rating: { type: Number },
  },
});
</script>