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