Vue beberapa slot
# Parent Component
<template>
<div class="the-card">
<div class="the-card_title">
{{ cardTitle }}
</div>
<div class="the-card_body">|
<slot>
Default card content goes here
</slot>
</div>
<div class="the-card_footer">
<slot name="footer">
Default footer
</slot>
</div>
</div>
</template>
# Card Component
<template>
<header>
<h2>{{ msg }}</h2>
</header>
<div>
<the-card cardTitle="About Me">
<template v-slot:default>/* or you can use #default*/
<p>Hi,Iam Mamunur Rashid Rimon, blah blah
</template>
<template v-slot:footer>/* or you can use #footer*/
<a href="https://rimonbd.com">Learn More</a>
</template>
</the-card>
<the-card cardTitle="Apple iPhone 12 Pro">
<template v-slot:default>
<img
src="https://fdn2.gsmarena.com/vv/bigpic/a
alt=""
/>
p>
Versions: A2407 (International); A2341 (US
A2408 (China, Hong Kong)
</p>
</template>
<template v-slot:footer>
<button>Buy Now</button>
<button>Add to Cart</button>
</template>
</the-card>
</the-card>
</div>
</template>
Irfan