Named slots and scoped slots in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a named slot called "header" in a Vue component.

Vue

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

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

Aheader

Bfooter

Cdefault

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using the default slot name instead of the named slot.

Forgetting to add the name attribute to the slot.

The named slot is defined using the name attribute on the <slot> element. Here, the slot is named "header".

2fill in blank

medium

Complete the code to provide content for the named slot "footer" in the parent component.

Vue

<ChildComponent>
  <template v-slot:[1]>
    <p>This is the footer content.</p>
  </template>
</ChildComponent>

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

Adefault

Bheader

Cfooter

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong slot name in v-slot.

Not using template with v-slot for named slots.

To provide content for a named slot, use v-slot:name where name matches the slot's name in the child component.

3fill in blank

hard

Fix the error in the scoped slot usage by completing the blank to access the slot prop named "user".

Vue

<ChildComponent>
  <template v-slot:default="[1]">
    <p>User name: {{ slotProps.user.name }}</p>
  </template>
</ChildComponent>

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

Aprops

Bslot

Cscope

DslotProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than the one declared in v-slot.

Not using quotes or braces correctly in v-slot.

The object passed to the scoped slot is often named by the developer. Here, it is named slotProps to access the user property.

4fill in blank

hard

Fill both blanks to correctly define a scoped slot named "item" and access its prop "info".

Vue

<template>
  <slot name="[1]" :[2]="info"></slot>
</template>

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

Aitem

Bdata

Cinfo

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the slot name and prop name.

Forgetting the colon before the prop name.

The slot is named "item" and it passes a prop named "info" to the parent via :info="info".

5fill in blank

hard

Fill all three blanks to correctly use a scoped slot named "preview" with prop "item" and display its "title".

Vue

<ChildComponent>
  <template v-slot:[1]="[2]">
    <h3>{{BLANK_3.title}}</h3>
  </template>
</ChildComponent>

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

Apreview

Bitem

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the slot prop in v-slot and inside the template.

Forgetting to bind the slot prop variable in the template tag.

The scoped slot is named "preview". The slot prop is named "item" and used inside the template to show item.title.