Slots for content distribution in Vue - Step-by-Step Execution

Concept Flow - Slots for content distribution

Parent Component

↓

Defines <Child> with <slot>

↓

Parent passes content inside <Child> tags

↓

Child renders <slot> where content appears

↓

Browser shows combined output

The parent component passes content inside the child tags, which the child inserts where the slot is defined, showing combined content.

Execution Sample

Vue

<template>
  <Child>
    <p>Hello from Parent</p>
  </Child>
</template>

<script setup>
import Child from './Child.vue'
</script>

Parent uses Child component and passes a paragraph inside it, which Child will display inside its slot.

Execution Table

Step	Action	Component	Content Passed	Slot Rendered Content	Output
1	Parent renders <Child>	Parent	<p>Hello from Parent</p>	N/A	Child component placeholder shown
2	Child template evaluated	Child	Receives <p>Hello from Parent</p>	<slot> replaced by passed content	Child renders <p>Hello from Parent</p> inside its template
3	Browser displays combined output	Browser	N/A	N/A	Visible: Hello from Parent paragraph inside Child layout

💡 Rendering completes after Child inserts passed content into slot and browser displays final output

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
passedContent	undefined	<p>Hello from Parent</p>	<p>Hello from Parent</p>	<p>Hello from Parent</p>
slotContent	empty	empty	<p>Hello from Parent</p>	<p>Hello from Parent</p>

Key Moments - 2 Insights

Why does the content inside <Child> tags appear inside the Child component?

Because the Child component has a <slot> element that acts as a placeholder for any content passed from the parent, as shown in execution_table step 2.

What happens if the Child component does not have a <slot>?

The passed content is ignored and not rendered, so nothing from the parent appears inside Child, unlike step 2 where slot replaces content.

Visual Quiz - 3 Questions

Look at the execution table, what content does the Child component receive at Step 2?

A No content

B <slot>

C <p>Hello from Parent</p>

D Empty string

💡 Hint

Check the 'Content Passed' column at Step 2 in the execution_table

At which step does the <slot> get replaced by the passed content?

A Step 1

B Step 2

C Step 3

D Never

💡 Hint

Look at the 'Slot Rendered Content' column in execution_table

If the Child component had no <slot>, what would happen to the passed content?

A It would be ignored and not rendered

B It would cause an error

C It would still display inside Child

D It would render outside Child

💡 Hint

Refer to key_moments question 2 about missing

Concept Snapshot

Slots let a child component show content passed from its parent.
Parent puts content inside <Child> tags.
Child uses <slot> as a placeholder.
Content inside <slot> is replaced by parent's content.
If no <slot>, passed content is ignored.
Slots help build flexible, reusable components.

Full Transcript

Slots in Vue allow a parent component to pass content into a child component. The child component defines a <slot> element in its template. When the parent uses the child and places content inside its tags, that content is passed to the child. During rendering, Vue replaces the <slot> in the child with the passed content. This way, the child can display dynamic content from the parent. If the child does not have a <slot>, the passed content is not shown. This mechanism helps create flexible components that can show different content depending on usage.

Practice

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

easy

A. To define component data properties

B. To handle component lifecycle events

C. To insert custom content inside a component from its parent

D. To style components with CSS

Solution

1. Step 1: Understand slot usage

   Slots allow a parent component to pass custom content into a child component's template.

2. Step 2: Differentiate from other features

   Slots are not for data, lifecycle, or styling but for content distribution.

3. Final Answer:

   To insert custom content inside a component from its parent -> Option C

4. Quick Check:

   Slots = custom content insertion [OK]

Hint: Slots let parents insert content inside child components [OK]

Common Mistakes:

• Confusing slots with data properties
• Thinking slots handle lifecycle events
• Assuming slots are for styling

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

easy

A. <template slot="header"></template>

B. <slot name="header"></slot>

C. <slot>header</slot>

D. <named-slot name="header"></named-slot>

Solution

1. Step 1: Recall named slot syntax

   Named slots use <slot name="slotName"></slot> inside the child component.

2. Step 2: Check options for correct syntax

   <slot name="header"></slot> matches the correct Vue syntax for named slots.

3. Final Answer:

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

4. Quick Check:

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

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using which is deprecated
• Writing header which is incorrect
• Inventing tags like

3. Given this parent and child component usage:

<ChildComponent>
  <template #header>Header Content</template>
  Default Content
</ChildComponent>

And the child template:

<div>
  <header><slot name="header">Default Header</slot></header>
  <main><slot>Default Content</slot></main>
</div>

What will be rendered inside the <header> and <main> tags?

medium

A. Header Content inside <header>, Default Content inside <main>

B. Default Header inside <header>, Default Content inside <main>

C. Header Content inside <header>, Default Content inside <main> replaced by nothing

D. Default Header inside <header>, Default Content inside <main> replaced by nothing

Solution

1. Step 1: Identify slot content passed from parent

   The parent provides content for the named slot "header" and default slot content "Default Content".

2. Step 2: Match slots in child template

   The named slot "header" receives "Header Content" overriding default header text. The default slot receives "Default Content" from parent, so default fallback is not used.

3. Final Answer:

   Header Content inside <header>, Default Content inside <main> -> Option A

4. Quick Check:

   Named slot content and default slot content render correctly [OK]

Hint: Named slot content overrides default; default slot uses fallback if empty [OK]

Common Mistakes:

• Assuming default slot content is replaced by nothing
• Confusing named slot fallback with default slot fallback
• Ignoring template #header syntax

4. What is wrong with this child component slot usage?

<div>
  <slot name="footer">Default Footer</slot>
  <slot>Default Content</slot>
</div>

And parent usage:

<ChildComponent>
  <template #foot>Custom Footer</template>
</ChildComponent>

medium

A. The parent uses #foot but child expects slot named "footer"

B. The child has two slots but parent provides content for none

C. The default slot is missing a name attribute

D. Slots cannot have default content inside them

Solution

1. Step 1: Compare slot names between parent and child

   The child expects a named slot "footer" but the parent provides content for "foot" slot, which does not match.

2. Step 2: Understand slot matching behavior

   Because of the name mismatch, the child's "footer" slot will show its default content, and the parent's "foot" slot content is ignored.

3. Final Answer:

   The parent uses #foot but child expects slot named "footer" -> Option A

4. Quick Check:

   Slot names must match exactly [OK]

Hint: Slot names must match exactly between parent and child [OK]

Common Mistakes:

• Assuming default slot must have a name
• Thinking slots cannot have default content
• Ignoring slot name mismatches

5. You want to create a reusable Card component with three slots: header, body, and footer. The body slot should have default text "No content provided" if empty. Which child component template correctly implements this?

hard

A. <div class="card">
<header><slot name="header"></slot></header>
<section><slot name="body">No content provided</slot></section>
<footer><slot name="footer"></slot></footer>
</div>

B. <div class="card">
<header><slot name="header">No header</slot></header>
<section><slot name="body"></slot></section>
<footer><slot name="footer">No footer</slot></footer>
</div>

C. <div class="card">
<header><slot></slot></header>
<section><slot>No content provided</slot></section>
<footer><slot></slot></footer>
</div>

D. <div class="card">
<header><slot name="header">No header</slot></header>
<section><slot name="body">No content provided</slot></section>
<footer><slot name="footer">No footer</slot></footer>
</div>

Solution

1. Step 1: Check slot names and default content

   The question requires three named slots: header, body, footer. The body slot must have default text "No content provided" if empty.

2. Step 2: Evaluate each option

   <div class="card">
     <header><slot name="header">No header</slot></header>
     <section><slot name="body">No content provided</slot></section>
     <footer><slot name="footer">No footer</slot></footer>
   </div>

   correctly names all slots and provides default content for all, including the body slot with "No content provided".

3. Final Answer:

   Option D correctly implements all named slots with proper default content -> Option D

4. Quick Check:

   Named slots with default fallback text =

   <div class="card">
     <header><slot name="header">No header</slot></header>
     <section><slot name="body">No content provided</slot></section>
     <footer><slot name="footer">No footer</slot></footer>
   </div>

   [OK]

Hint: Use named slots with default text inside slot tags [OK]

Common Mistakes:

• Using unnamed slots for multiple areas
• Missing default content for required slots
• Confusing default slot with named slots