HTML

named slot vue

<slot name="header"></slot>

<!--usage-->

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

use of slot in vue

/*first component*/
<template>
  <header>
    <h2>{{ msg }}</h2>
  </header>
  <div>
    <the-card cardTitle="About Me">
       <p>Hi,Iam Mamunur Rashid Rimon, blah blah</p>
    </the-card>
    <the-card cardTitle="Apple iPhone 12 Pro">
      <img
        src="https://fdn2.gsmarena.com/vv/bigpic"
        alt=""
      />
      <p>
        Versions: A2407 (International); A2341 (USA)
        A2408 (China, Hong Kong)
      </p>
    </the-card>
    <the-card cardTitle="Services">I
      <ul>
       <li>Web Development</li>
      </ul>
    </the-card>
  </div>
</template>
<script>
import TheCard from "./TheCard.vue";
export default{
  data(){
    return{
      msg: "Vue3 Bangla Tutorial"
    };
  },
  components:{
    TheCard
};
</script>


/*first component*/






/*second component*/
<template>
  <div class="the-card">
    <div class="the-card_title">
     {{ cardTitle }}
    </div>
    <div class="the-card_body">
    <slot>default value if slot is empty</slot>
    </div>
  </div>
</template>
<script>
export default{
 props: ["cardTitle"]
};
</script>

/*second component*/