1---
2title: Slot Content Only Has Access to Parent Component Scope
3impact: HIGH
4impactDescription: Attempting to access child component data in slot content results in undefined values or errors
5type: gotcha
6tags: [vue3, slots, scope, reactivity, common-mistake]
7---
8 
9# Slot Content Only Has Access to Parent Component Scope
10 
11**Impact: HIGH** - Slot content is compiled in the parent component's scope and cannot access data defined in the child component. This follows JavaScript's lexical scoping rules and is a common source of confusion.
12 
13When you provide content for a slot, that content is defined in your parent template and can only access data available in the parent component. The child component's internal state is not accessible unless explicitly passed via scoped slots.
14 
15## Task Checklist
16 
17- [ ] Remember that slot content is compiled in parent scope
18- [ ] Never try to access child component data directly in slot content
19- [ ] Use scoped slots when child data needs to be exposed to parent
20- [ ] Check that all template expressions reference data available in the current component
21 
22**Incorrect:**
23```vue
24<!-- Parent.vue -->
25<script setup>
26import SubmitButton from './SubmitButton.vue'
27</script>
28 
29<template>
30  <!-- BAD: Trying to access child's buttonText - this will be undefined -->
31  <SubmitButton>{{ buttonText }}</SubmitButton>
32 
33  <!-- BAD: Trying to access child's isLoading state -->
34  <SubmitButton>
35    <span v-if="isLoading">Loading...</span>
36    <span v-else>Submit</span>
37  </SubmitButton>
38</template>
39```
40 
41```vue
42<!-- SubmitButton.vue (Child) -->
43<script setup>
44import { ref } from 'vue'
45 
46const buttonText = ref('Click me')  // Not accessible in parent's slot content
47const isLoading = ref(false)        // Not accessible in parent's slot content
48</script>
49 
50<template>
51  <button>
52    <slot></slot>
53  </button>
54</template>
55```
56 
57**Correct - Use Scoped Slots:**
58```vue
59<!-- SubmitButton.vue (Child) - Expose data via slot props -->
60<script setup>
61import { ref } from 'vue'
62 
63const buttonText = ref('Click me')
64const isLoading = ref(false)
65</script>
66 
67<template>
68  <button>
69    <!-- Pass child data as slot props -->
70    <slot :text="buttonText" :loading="isLoading"></slot>
71  </button>
72</template>
73```
74 
75```vue
76<!-- Parent.vue -->
77<script setup>
78import SubmitButton from './SubmitButton.vue'
79</script>
80 
81<template>
82  <!-- GOOD: Receive child data via scoped slot -->
83  <SubmitButton v-slot="{ text, loading }">
84    <span v-if="loading">Loading...</span>
85    <span v-else>{{ text }}</span>
86  </SubmitButton>
87</template>
88```
89 
90**Correct - Use Parent Data:**
91```vue
92<!-- Parent.vue -->
93<script setup>
94import { ref } from 'vue'
95import SubmitButton from './SubmitButton.vue'
96 
97// Define data in parent where slot content is compiled
98const message = ref('Submit Form')
99const isSubmitting = ref(false)
100</script>
101 
102<template>
103  <!-- GOOD: Using parent's own data in slot content -->
104  <SubmitButton>
105    <span v-if="isSubmitting">Processing...</span>
106    <span v-else>{{ message }}</span>
107  </SubmitButton>
108</template>
109```
110 
111## The Function Analogy
112 
113Think of slots as function parameters:
114 
115```javascript
116// Slot content is like a callback defined in parent scope
117function Parent() {
118  const parentData = 'Hello'
119 
120  // This callback can only see parentData, not childData
121  Child((slotProps) => {
122    return parentData + (slotProps?.text || '')
123  })
124}
125 
126function Child(slotCallback) {
127  const childData = 'World'  // Not visible to callback
128 
129  // Must explicitly pass data via slot props
130  return slotCallback({ text: childData })
131}
132```
133 
134## Reference
135- [Vue.js Slots - Render Scope](https://vuejs.org/guide/components/slots.html#render-scope)
136