Slot

slot 사용 전 코드
pages > About.vue

<template>
	<SlotCard content="Card Content1"></SlotCard>
	<SlotCard content="Card Content2"></SlotCard>
</template>

<script>
import SlotCard from "components/SlotCard";
export default {
  name: 'AboutPage',
  components: {SlotCard,},
}
</script>

component > SlotCard.vue

<template>
  <div class="card">
  	{{ content }}
  </div>
</template>

<script>
  export default {
    name: 'SlotCard',
     props: {
       content: String
     },
  }
</script>

---

slot 사용 후 코드
pages > About.vue

<template>
	<SlotCard>This is the SlotCard content.</SlotCard>
    <SlotCard>This is the another SlotCard content.</SlotCard>
</template>

<script>
import SlotCard from "components/SlotCard";
export default {
  name: 'AboutPage',
  components: {SlotCard,},
}
</script>

component > SlotCard.vue

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'SlotCard',
    // props: {
    //   content: String
    // },
  }
</script>