JAVASCRIPT

vue.js slots

Parent Component :
<template>
  <Child>
    <template v-slot:header>
      <h1>Header </h1>
    </template>

    <template v-slot:content>
      <h1> Content </h1>
    </template>

    <template v-slot:footer>
      <h1>Footer</h1>
    </template>
  </Child>
</template>

Child component :

<template>
  <slot name="header">Default Value</slot>
  <slot name="content">Default Value</slot>
  <slot name="footer">Default Value</slot>
</template>

slot vuetify js

<button type="submit">
  <slot>Envoyer</slot>
</button>

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*/

what is slot in vue.js

// app.vue
<template>
  <current-user>
    <template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>    
  </current-user>
</template>