Named slots and scoped slots in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue component using named slots?

Consider the following Vue component usage with named slots. What will be the rendered HTML inside the <Card> component?

Vue

<template>
  <Card>
    <template #header>
      <h1>Title</h1>
    </template>
    <template #footer>
      <p>Footer text</p>
    </template>
    <p>Main content</p>
  </Card>
</template>

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

A <div class="card"><p>Footer text</p><h1>Title</h1><p>Main content</p></div>

B <div class="card"><h1>Title</h1><p>Footer text</p></div>

C <div class="card"><p>Main content</p></div>

D <div class="card"><h1>Title</h1><p>Main content</p><p>Footer text</p></div>

💡 Hint

Remember that named slots are placed where their slot names are declared inside the component template.

The Card component places the header slot content first, then the default slot content, then the footer slot content. So the output includes the header <h1>Title</h1>, the main content <p>Main content</p>, and the footer <p>Footer text</p> in that order.

❓ state_output

intermediate

What is the value of itemText inside the scoped slot?

Given this parent and child component using a scoped slot, what will be the value of itemText inside the slot?

Vue

<!-- Parent.vue -->
<template>
  <List :items="['apple', 'banana']">
    <template #default="{ item }">
      <p>{{ itemText }}</p>
    </template>
  </List>
</template>

<script setup>
import List from './List.vue'
const itemText = 'fruit'
</script>

<!-- List.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item">
      <slot :item="item" />
    </li>
  </ul>
</template>

<script setup>
const props = defineProps({ items: Array })
</script>

A fruit

B apple

C banana

D undefined

💡 Hint

Scoped slot templates have access to both the slot props and the parent component's scope.

The itemText variable is declared in the parent component's <script setup> and is accessible inside the scoped slot template because slot content has access to the parent scope in addition to the slot props provided by the child.

📝 Syntax

advanced

Which option correctly defines a scoped slot in Vue 3?

Which of the following slot usage syntaxes correctly passes a scoped slot prop named user?

A <template #default="{ user }">{{ user.name }}</template>

B <template v-slot:default="user">{{ user.name }}</template>

C <template #default="user">{{ user.name }}</template>

D <template v-slot:user="{ user }">{{ user.name }}</template>

💡 Hint

Remember the correct syntax for destructuring slot props in Vue 3.

Option A correctly uses destructuring in the slot scope to access user. Option A passes user as an object but does not destructure it, so user.name would be undefined. Option A uses shorthand but does not destructure, so user.name is undefined. Option A uses a wrong slot name user instead of default.

🔧 Debug

advanced

Why does this scoped slot not display the passed data?

Given this code, why does the slot not show the message?

Vue

<!-- Parent.vue -->
<template>
  <Child>
    <template #default="props">
      <p>{{ message }}</p>
    </template>
  </Child>
</template>

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

<!-- Child.vue -->
<template>
  <slot :message="'Hello from child'" />
</template>

A The child component does not pass any props to the slot

B The slot is missing a name attribute

C <code>message</code> is not defined in the slot scope; should use <code>props.message</code>

D The parent component must use <code>v-slot</code> instead of <code>#default</code>

💡 Hint

Check how slot props are accessed inside the slot template.

The slot scope object is named props. The variable message is inside props, so you must use {{ props.message }} to access it. Using {{ message }} alone looks for a variable in the parent scope, which does not exist.

🧠 Conceptual

expert

Which statement about named and scoped slots in Vue 3 is TRUE?

Choose the correct statement about how named slots and scoped slots work in Vue 3.

A Named slots can pass data to the parent via slot props, but default slots cannot.

B Scoped slots allow the child component to send data to the parent through slot props regardless of slot name.

C Only the default slot can be scoped; named slots cannot have slot props.

D Slot props are only available in the child component, not in the parent slot template.

💡 Hint

Think about how slot props work with named and default slots.

Scoped slots allow the child component to pass data to the parent through slot props for any slot, named or default. So option B is true. Option B is false because default slots can also be scoped. Option B is false because named slots can have slot props. Option B is false because slot props are accessed in the parent slot template.

Practice

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

easy

A. To handle component lifecycle hooks

B. To share data from parent to child components

C. To create reactive state inside a component

D. To place different content in specific parts of a component

Solution

1. Step 1: Understand named slots concept

   Named slots allow you to define multiple placeholders inside a component where different content can be inserted.

2. Step 2: Identify the purpose of named slots

   They help organize content by placing it in specific parts of the component template.

3. Final Answer:

   To place different content in specific parts of a component -> Option D

4. Quick Check:

   Named slots = specific content placement [OK]

Hint: Named slots = different content in specific places [OK]

Common Mistakes:

• Confusing named slots with props
• Thinking named slots share data
• Mixing named slots with lifecycle hooks

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall named slot syntax in Vue

   Named slots are defined using the element with a name attribute.

2. Step 2: Match correct syntax

   The correct syntax is . Other options are invalid or deprecated.

3. Final Answer:

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

4. Quick Check:

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

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using which is deprecated
• Trying to create custom tags like
• Confusing named slots with props

3. Given this parent usage of a scoped slot:

<MyList>
  <template #item="{ item }">
    <li>{{ item.text }}</li>
  </template>
</MyList>

And this child component template:

<ul>
  <slot name="item" :item="listItem"></slot>
</ul>

What will be rendered if listItem is { text: 'Hello' }?

medium

A. Hello

B.

C. {{ item.text }}

D.

Solution

1. Step 1: Understand scoped slot data passing

   The child passes listItem as item to the slot content using :item="listItem".

2. Step 2: Parent uses slot scope to access item.text

   The parent template receives item and renders <li>{{ item.text }}</li>, which becomes <li>Hello</li>.

3. Final Answer:

   <ul><li>Hello</li></ul> -> Option A

4. Quick Check:

   Scoped slot passes data = rendered content [OK]

Hint: Scoped slots pass data object to slot content [OK]

Common Mistakes:

• Ignoring the slot scope and expecting raw slot tags
• Not using the slot props correctly in parent
• Confusing named slots with scoped slots

4. Identify the error in this Vue component usage:

<MyComponent>
  <template slot="footer">Footer Content</template>
</MyComponent>

Assuming MyComponent defines a named slot footer using <slot name="footer">.

medium

A. Missing v-slot directive on template

B. Using deprecated slot attribute instead of #footer shorthand

C. Named slot must be inside MyComponent template, not usage

D. No error, this is correct syntax

Solution

1. Step 1: Check slot syntax in Vue 3

   The slot attribute on template is deprecated in Vue 3.

2. Step 2: Identify correct syntax for named slots

   Use v-slot:footer or shorthand #footer instead of slot="footer".

3. Final Answer:

   Using deprecated slot attribute instead of #footer shorthand -> Option B

4. Quick Check:

   Use v-slot or # for named slots [OK]

Hint: Use v-slot or #, not slot attribute [OK]

Common Mistakes:

• Using old slot attribute syntax
• Confusing slot definition with slot usage
• Thinking no syntax change in Vue 3

5. You want to create a reusable Card component with named slots for header, body, and footer. The body slot should receive a scoped prop info from the component. Which is the correct way to define the Card template?

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify named slots and scoped props

   The body slot must receive the scoped prop info from the component's data.

2. Step 2: Check slot definitions

   Only the body slot has :info='cardInfo' to pass the scoped prop. The others are simple named slots without props.

3. Final Answer:

   Correct template with named slots and scoped prop on body slot -> Option A

4. Quick Check:

   Scoped prop on body slot only [OK]

Hint: Pass scoped props only on slots needing data [OK]

Common Mistakes:

• Passing scoped props on wrong slots
• Missing scoped prop on body slot
• Using default slot instead of named slots