[Vue] slot

app.vue

<template>
  <div>
    <h2>hello slots</h2>
    <CardView
      ><template v-slot:header>
        <h3>Random Image</h3>
      </template>
      <template v-slot:default>
        <img src="https://placeimg.com/200/100/any" alt="" />
      </template>
      <template v-slot:footer>
        <small>thank you</small>
      </template>
    </CardView>
  </div>
</template>
<script>
import CardView from "./components/slot/CardView";
export default {
  name: "App",
  components: { CardView },
  data() {
    return {};
  },
};
</script>

<style></style>

 

CardView.vue

<template>
  <div class="card">
    <div class="card-header"><slot name="header"></slot></div>
    <div class="card-body"><slot></slot></div>
    <div class="card-footer"><slot name="footer"></slot></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  padding: 1rem;
  margin-bottom: 1rem;
  width: 200px;
}

.card-header {
  color: red;
}
.card-body {
  color: green;
}

.card-footer {
  color: pink;
}
</style>