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.