1---
2title: Forward Slots to Child Components Correctly
3impact: MEDIUM
4impactDescription: Wrapper components that don't forward slots break slot functionality for consumers
5type: best-practice
6tags: [vue3, slots, component-composition, wrapper-components, slot-forwarding]
7---
8 
9# Forward Slots to Child Components Correctly
10 
11**Impact: MEDIUM** - When creating wrapper components that enhance or extend other components, you need to forward slots from the parent to the wrapped child. Without proper slot forwarding, consumers of your wrapper cannot customize the inner component's slots.
12 
13## Task Checklist
14 
15- [ ] Use `v-for` with `$slots` to iterate over all provided slots
16- [ ] Use dynamic slot names with `v-slot:[slotName]`
17- [ ] Pass slot props through with `v-bind="slotProps"`
18- [ ] Handle cases where slotProps might be undefined
19 
20**Basic Slot Forwarding Pattern:**
21```vue
22<!-- EnhancedButton.vue - Wrapper component -->
23<script setup>
24import BaseButton from './BaseButton.vue'
25</script>
26 
27<template>
28  <div class="button-wrapper">
29    <BaseButton v-bind="$attrs">
30      <!-- Forward all slots to BaseButton -->
31      <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
32        <slot :name="slotName" v-bind="slotProps ?? {}" />
33      </template>
34    </BaseButton>
35  </div>
36</template>
37```
38 
39**Usage:**
40```vue
41<script setup>
42import EnhancedButton from './EnhancedButton.vue'
43</script>
44 
45<template>
46  <!-- Slots pass through to BaseButton -->
47  <EnhancedButton>
48    <template #icon>
49      <IconCheck />
50    </template>
51    <template #default>
52      Click me
53    </template>
54  </EnhancedButton>
55</template>
56```
57 
58## Handling Scoped Slots
59 
60When the child component provides slot props, you must forward them:
61 
62```vue
63<!-- DataTableWrapper.vue -->
64<script setup>
65import DataTable from './DataTable.vue'
66 
67const props = defineProps(['data'])
68</script>
69 
70<template>
71  <div class="table-container">
72    <DataTable :items="data">
73      <!-- Forward slots including scoped slot props -->
74      <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
75        <slot :name="slotName" v-bind="slotProps ?? {}" />
76      </template>
77    </DataTable>
78  </div>
79</template>
80```
81 
82```vue
83<!-- Consumer can use scoped slot props -->
84<DataTableWrapper :data="users">
85  <template #row="{ item, index }">
86    <tr>
87      <td>{{ index + 1 }}</td>
88      <td>{{ item.name }}</td>
89    </tr>
90  </template>
91</DataTableWrapper>
92```
93 
94## Alternative: Handling Undefined slotProps
95 
96Some scenarios require checking if slotProps exists:
97 
98```vue
99<template>
100  <ChildComponent>
101    <template v-for="(_, name) in $slots" v-slot:[name]="slotProps">
102      <!-- Handle both scoped and non-scoped slots -->
103      <slot v-if="slotProps" :name="name" v-bind="slotProps" />
104      <slot v-else :name="name" />
105    </template>
106  </ChildComponent>
107</template>
108```
109 
110## Forwarding Specific Slots Only
111 
112If you only want to forward certain slots:
113 
114```vue
115<template>
116  <ChildComponent>
117    <!-- Only forward header and footer slots -->
118    <template v-if="$slots.header" #header="slotProps">
119      <slot name="header" v-bind="slotProps ?? {}" />
120    </template>
121 
122    <template v-if="$slots.footer" #footer="slotProps">
123      <slot name="footer" v-bind="slotProps ?? {}" />
124    </template>
125 
126    <!-- Default slot handled differently -->
127    <slot />
128  </ChildComponent>
129</template>
130```
131 
132## Common Mistakes
133 
134| Mistake | Problem | Solution |
135|---------|---------|----------|
136| Not using `v-bind="slotProps"` | Scoped slot data lost | Always bind slotProps |
137| Forgetting `?? {}` or null check | Error when slotProps undefined | Add nullish coalescing |
138| Static slot names in loop | Only forwards one slot | Use `v-slot:[slotName]` dynamic syntax |
139| Missing `v-for` key warning | Vue warning (non-critical) | Keys not needed for slot functions |
140 
141## Reference
142- [Vue Land FAQ - Forwarding Slots](https://vue-land.github.io/faq/forwarding-slots)
143- [Vue.js Slots - Scoped Slots](https://vuejs.org/guide/components/slots.html#scoped-slots)
144