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'.