1---
2title: Pass Slots as Functions in Render Functions, Not Direct Children
3impact: HIGH
4impactDescription: Passing slot content incorrectly causes slots to not render or be treated as props
5type: gotcha
6tags: [vue3, render-function, slots, children, vnode]
7---
8 
9# Pass Slots as Functions in Render Functions, Not Direct Children
10 
11**Impact: HIGH** - When creating component vnodes with `h()`, children must be passed as slot functions, not as direct children. Passing children directly may cause them to be interpreted as props or fail to render.
12 
13## Task Checklist
14 
15- [ ] Pass slot content as functions: `{ default: () => [...] }`
16- [ ] Use `null` for props when only passing slots to avoid misinterpretation
17- [ ] For default slot only, a single function can be passed directly
18- [ ] For named slots, use an object with slot function properties
19 
20**Incorrect:**
21```js
22import { h } from 'vue'
23import MyComponent from './MyComponent.vue'
24 
25// WRONG: Children array may be misinterpreted
26h(MyComponent, [
27  h('span', 'Slot content')  // May not render as expected
28])
29 
30// WRONG: Named slots as direct properties
31h(MyComponent, {
32  header: h('h1', 'Title'),  // This is a prop, not a slot!
33  default: h('p', 'Content')  // This is also a prop
34})
35```
36 
37**Correct:**
38```js
39import { h } from 'vue'
40import MyComponent from './MyComponent.vue'
41 
42// CORRECT: Default slot as function
43h(MyComponent, null, {
44  default: () => h('span', 'Slot content')
45})
46 
47// CORRECT: Single default slot shorthand
48h(MyComponent, null, () => h('span', 'Slot content'))
49 
50// CORRECT: Named slots as functions
51h(MyComponent, null, {
52  header: () => h('h1', 'Title'),
53  default: () => h('p', 'Content'),
54  footer: () => [
55    h('span', 'Footer item 1'),
56    h('span', 'Footer item 2')
57  ]
58})
59 
60// CORRECT: With props AND slots
61h(MyComponent, { size: 'large' }, {
62  default: () => 'Button Text'
63})
64```
65 
66## Why Functions?
67 
68Slots in Vue 3 are functions for lazy evaluation:
69 
70```js
71// Slots are called by the child component when needed
72// This enables:
73// 1. Scoped slots (passing data back)
74// 2. Conditional rendering (slot not called if not used)
75// 3. Proper reactivity tracking
76 
77h(MyList, { items }, {
78  // Scoped slot - receives data from child
79  item: ({ item, index }) => h('li', `${index}: ${item.name}`)
80})
81```
82 
83## The null Props Gotcha
84 
85When passing only slots, always use `null` for props:
86 
87```js
88// WRONG: Slots object interpreted as props!
89h(MyComponent, {
90  default: () => 'Hello'
91})
92// MyComponent receives: props.default = () => 'Hello'
93 
94// CORRECT: null signals "no props, next arg is slots"
95h(MyComponent, null, {
96  default: () => 'Hello'
97})
98// MyComponent receives slot correctly
99```
100 
101## Forwarding Slots from Parent
102 
103```js
104export default {
105  setup(props, { slots }) {
106    return () => h(ChildComponent, null, {
107      // Forward all slots from parent
108      ...slots,
109 
110      // Or forward specific slots
111      default: slots.default,
112      header: slots.header
113    })
114  }
115}
116```
117 
118## Scoped Slots in Render Functions
119 
120```js
121// Parent: Receives data from child via slot props
122h(DataTable, { data: items }, {
123  row: (slotProps) => h('tr', [
124    h('td', slotProps.item.name),
125    h('td', slotProps.item.value)
126  ])
127})
128 
129// Child (DataTable): Calls slot with data
130export default {
131  props: ['data'],
132  setup(props, { slots }) {
133    return () => h('table', [
134      h('tbody',
135        props.data.map(item =>
136          // Pass data to slot function
137          slots.row?.({ item })
138        )
139      )
140    ])
141  }
142}
143```
144 
145## Common Patterns
146 
147```js
148// Wrapper component forwarding slots
149h('div', { class: 'wrapper' }, [
150  h(InnerComponent, null, slots)
151])
152 
153// Conditional slot rendering
154h('div', [
155  slots.header?.(),  // Optional chaining - only render if slot provided
156  h('main', slots.default?.()),
157  slots.footer?.()
158])
159 
160// Slot with fallback content
161h('div', [
162  slots.default?.() ?? h('p', 'Default content when slot not provided')
163])
164```
165 
166## Reference
167- [Vue.js Render Functions - Passing Slots](https://vuejs.org/guide/extras/render-function.html#passing-slots)
168- [Vue.js Render Functions - Children](https://vuejs.org/guide/extras/render-function.html#children)
169