Slots for content distribution in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a default slot in a Vue component.

Vue

<template>
  <div>
    <slot>[1]</slot>
  </div>
</template>

Drag options to blanks, or click blank then click option'

ADefault content

Bslot-content

Ccontent

Dfallback

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the slot empty so no fallback content appears.

The default slot content is placed inside the <slot> tags and shown if no content is passed.

2fill in blank

medium

Complete the code to name a slot called 'header' in a Vue component.

Vue

<template>
  <div>
    <slot name="[1]">Default header</slot>
  </div>
</template>

Drag options to blanks, or click blank then click option'

Afooter

Bheader

Cmain

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a slot name that doesn't match the content passed from the parent.

Named slots use the name attribute to identify the slot. Here, 'header' names the slot.

3fill in blank

hard

Fix the error in the parent component to correctly pass content to the named slot 'footer'.

Vue

<ChildComponent>
  <template v-slot:[1]>
    <p>Footer content here</p>
  </template>
</ChildComponent>

Drag options to blanks, or click blank then click option'

Afooter

Bdefault

Cmain

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong slot name in the parent component.

The v-slot directive must use the exact slot name defined in the child component, here 'footer'.

4fill in blank

hard

Fill both blanks to pass props named 'title' and 'subtitle' to a scoped slot.

Vue

<ChildComponent>
  <template v-slot:default="[1]">
    <h1>{{BLANK_2.title}}</h1>
  </template>
</ChildComponent>

Drag options to blanks, or click blank then click option'

AslotProps

Bprops

Cdata

Dinfo

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the slot props variable and when accessing its properties.

The slot props object is commonly named 'props' and used to access passed data like 'props.title'.

5fill in blank

hard

Fill all three blanks to define a scoped slot with props 'name', 'age', and display 'name' and 'age'.

Vue

<ChildComponent>
  <template v-slot:profile="[1]">
    <p>Name: {{BLANK_2.name}}</p>
    <p>Age: {{BLANK_3}}</p>
  </template>
</ChildComponent>

Drag options to blanks, or click blank then click option'

AslotData

Buser

CslotData.age

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently or forgetting to access 'age' from the slot props.

The slot props object is named 'slotData'. Access 'name' with 'slotData.name' and 'age' with 'slotData.age'.

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