what is slot in vue js

1<template> 
2	<div class="message">   
3		<slot :firstName="firstName"></slot> 
4	</div>
5</template><script>
6export default {  name: "MyMessage",
7data() {    return {      firstName: "Luca",    };  
8},};
9</script>
10
11<style scoped>
12.message {  color: red;  text-decoration: underline;}
13</style>
14
15
16
17<template>
18  <my-message>
19    <template v-slot="slotProps">
20      <h1>Hey {{ slotProps.firstName }}, NotOnlyCSS is awesome!</h1>
21    </template>
22  </my-message>
23</template>
24<script>
25import MyMessage from "./components/MyMessage.vue";
26export default {
27  name: "App",
28  components: {
29    MyMessage,
30  },
31};
32</script>

1// app.vue
2<template>
3  <current-user>
4    <template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>    
5  </current-user>
6</template>
7

1// app.vue
2<template>
3  <current-user v-slot="{user}">
4    {{ user.firstName }}
5  </current-user>
6</template>
7