Named slots and scoped slots in Vue - Step-by-Step Execution

Concept Flow - Named slots and scoped slots

Parent Component

↓

Uses Child Component

↓

Child Component Template

↓

Named Slot: "header"

↓

Default Slot

↓

Named Slot: "footer"

↓

Scoped Slot: passes data

↓

Parent fills slots with content

↓

Parent uses scoped slot data

↓

Final Rendered Output

The parent component uses the child component and fills named slots with content. Scoped slots pass data from child to parent for dynamic rendering.

Execution Sample

Vue

<ChildComponent>
  <template #header>
    <h1>Title</h1>
  </template>
  <template #default>
    <p>Main content</p>
  </template>
  <template #footer>
    <small>Footer info</small>
  </template>
  <template #scopedSlot="slotProps">
    <p>User: {{ slotProps.user }}</p>
  </template>
</ChildComponent>

Parent component fills named slots 'header', default, 'footer', and uses scoped slot 'scopedSlot' with passed data in the child component.

Execution Table

Step	Action	Slot Name	Passed Data	Rendered Content
1	Parent uses ChildComponent	N/A	N/A	ChildComponent placeholder
2	ChildComponent reads slots	header	N/A	<h1>Title</h1>
3	ChildComponent reads slots	default	N/A	<p>Main content</p>
4	ChildComponent reads slots	footer	N/A	<small>Footer info</small>
5	ChildComponent passes scoped data	scopedSlot	{ user: 'Alice' }	Parent uses user data
6	Parent renders scoped slot content	scopedSlot	{ user: 'Alice' }	<p>User: Alice</p>
7	Final render combines all slots	all	N/A	<h1>Title</h1><p>Main content</p><small>Footer info</small><p>User: Alice</p>

💡 All named and scoped slots filled and rendered, final output complete.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
headerSlotContent	undefined	<h1>Title</h1>	<h1>Title</h1>	<h1>Title</h1>	<h1>Title</h1>	<h1>Title</h1>	<h1>Title</h1>
defaultSlotContent	undefined	undefined	<p>Main content</p>	<p>Main content</p>	<p>Main content</p>	<p>Main content</p>	<p>Main content</p>
footerSlotContent	undefined	undefined	undefined	<small>Footer info</small>	<small>Footer info</small>	<small>Footer info</small>	<small>Footer info</small>
scopedSlotData	undefined	undefined	undefined	undefined	{ user: 'Alice' }	{ user: 'Alice' }	{ user: 'Alice' }
scopedSlotContent	undefined	undefined	undefined	undefined	undefined	<p>User: Alice</p>	<p>User: Alice</p>

Key Moments - 3 Insights

Why does the parent use <template #header> instead of a normal HTML tag?

Because named slots require wrapping content in a <template> with the slot name (#header) so Vue knows which slot to fill, as shown in execution_table step 2.

How does the parent get data from the child in a scoped slot?

The child passes data as an object to the scoped slot (step 5), and the parent accesses it inside the slot template (step 6), enabling dynamic content.

What happens if a named slot is not filled by the parent?

The child renders the default content inside that slot or nothing if none is provided, which is why filling all named slots is important for full output (step 7).

Visual Quiz - 3 Questions

Look at the execution_table at step 5. What data does the child pass to the scoped slot?

A No data passed

B { name: 'Bob' }

C { user: 'Alice' }

D { age: 30 }

💡 Hint

Check the 'Passed Data' column at step 5 in the execution_table.

At which step does the parent render the scoped slot content using the passed data?

A Step 4

B Step 6

C Step 3

D Step 2

💡 Hint

Look for 'Parent renders scoped slot content' in the 'Action' column.

If the parent did not provide content for the 'footer' slot, what would happen?

A The footer slot would render default content or be empty

B An error would occur

C The footer slot would show header content

D The footer slot would be removed from DOM

💡 Hint

Refer to key_moments about what happens if a named slot is not filled.

Concept Snapshot

Named slots let parents fill specific parts of a child component using <template #name>.
Scoped slots pass data from child to parent for dynamic content.
Parent accesses scoped slot data via slot props.
Unfilled named slots render default or nothing.
Use named slots for flexible, reusable components.

Full Transcript

This visual trace shows how Vue named slots and scoped slots work. The parent component uses the child component and fills named slots like 'header', 'default', and 'footer' with content inside <template> tags. The child component reads these slots and renders their content in the right places. Scoped slots allow the child to pass data objects to the parent, which the parent uses to render dynamic content. The execution table tracks each step from slot reading to final rendering. Variable tracking shows how slot content and data change over time. Key moments clarify common confusions like why templates are used for slots and how scoped data is accessed. The quiz tests understanding of slot data passing and rendering steps. The snapshot summarizes the core ideas for quick recall.

Practice

1. What is the main purpose of named slots in Vue components?

easy

A. To handle component lifecycle hooks

B. To share data from parent to child components

C. To create reactive state inside a component

D. To place different content in specific parts of a component

Solution

1. Step 1: Understand named slots concept

   Named slots allow you to define multiple placeholders inside a component where different content can be inserted.

2. Step 2: Identify the purpose of named slots

   They help organize content by placing it in specific parts of the component template.

3. Final Answer:

   To place different content in specific parts of a component -> Option D

4. Quick Check:

   Named slots = specific content placement [OK]

Hint: Named slots = different content in specific places [OK]

Common Mistakes:

• Confusing named slots with props
• Thinking named slots share data
• Mixing named slots with lifecycle hooks

2. Which of the following is the correct syntax to define a named slot called header inside a Vue component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall named slot syntax in Vue

   Named slots are defined using the element with a name attribute.

2. Step 2: Match correct syntax

   The correct syntax is . Other options are invalid or deprecated.

3. Final Answer:

   <slot name="header"></slot> -> Option C

4. Quick Check:

   Named slot syntax = <slot name="..."> [OK]

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using which is deprecated
• Trying to create custom tags like
• Confusing named slots with props

3. Given this parent usage of a scoped slot:

<MyList>
  <template #item="{ item }">
    <li>{{ item.text }}</li>
  </template>
</MyList>

And this child component template:

<ul>
  <slot name="item" :item="listItem"></slot>
</ul>

What will be rendered if listItem is { text: 'Hello' }?

medium

A. Hello

B.

C. {{ item.text }}

D.

Solution

1. Step 1: Understand scoped slot data passing

   The child passes listItem as item to the slot content using :item="listItem".

2. Step 2: Parent uses slot scope to access item.text

   The parent template receives item and renders <li>{{ item.text }}</li>, which becomes <li>Hello</li>.

3. Final Answer:

   <ul><li>Hello</li></ul> -> Option A

4. Quick Check:

   Scoped slot passes data = rendered content [OK]

Hint: Scoped slots pass data object to slot content [OK]

Common Mistakes:

• Ignoring the slot scope and expecting raw slot tags
• Not using the slot props correctly in parent
• Confusing named slots with scoped slots

4. Identify the error in this Vue component usage:

<MyComponent>
  <template slot="footer">Footer Content</template>
</MyComponent>

Assuming MyComponent defines a named slot footer using <slot name="footer">.

medium

A. Missing v-slot directive on template

B. Using deprecated slot attribute instead of #footer shorthand

C. Named slot must be inside MyComponent template, not usage

D. No error, this is correct syntax

Solution

1. Step 1: Check slot syntax in Vue 3

   The slot attribute on template is deprecated in Vue 3.

2. Step 2: Identify correct syntax for named slots

   Use v-slot:footer or shorthand #footer instead of slot="footer".

3. Final Answer:

   Using deprecated slot attribute instead of #footer shorthand -> Option B

4. Quick Check:

   Use v-slot or # for named slots [OK]

Hint: Use v-slot or #, not slot attribute [OK]

Common Mistakes:

• Using old slot attribute syntax
• Confusing slot definition with slot usage
• Thinking no syntax change in Vue 3

5. You want to create a reusable Card component with named slots for header, body, and footer. The body slot should receive a scoped prop info from the component. Which is the correct way to define the Card template?

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify named slots and scoped props

   The body slot must receive the scoped prop info from the component's data.

2. Step 2: Check slot definitions

   Only the body slot has :info='cardInfo' to pass the scoped prop. The others are simple named slots without props.

3. Final Answer:

   Correct template with named slots and scoped prop on body slot -> Option A

4. Quick Check:

   Scoped prop on body slot only [OK]

Hint: Pass scoped props only on slots needing data [OK]

Common Mistakes:

• Passing scoped props on wrong slots
• Missing scoped prop on body slot
• Using default slot instead of named slots