vue js slots

1Parent Component :
2<template>
3  <Child>
4    <template v-slot:header>
5      <h1>Header </h1>
6    </template>
7
8    <template v-slot:content>
9      <h1> Content </h1>
10    </template>
11
12    <template v-slot:footer>
13      <h1>Footer</h1>
14    </template>
15  </Child>
16</template>
17
18Child component :
19
20<template>
21  <slot name="header">Default Value</slot>
22  <slot name="content">Default Value</slot>
23  <slot name="footer">Default Value</slot>
24</template>

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