JAVASCRIPT

Vue multiple 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>