Slots for content distribution in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a slot in Vue?

A slot is a placeholder inside a Vue component where you can insert content from the parent component. It helps to make components flexible and reusable.

beginner

How do you define a default slot in a Vue component?

You use the tag inside the component template without a name. This slot will receive any content passed between the component tags if no named slot is specified.

intermediate

What is a named slot in Vue and why use it?

A named slot lets you define multiple slots with different names inside a component. The parent can then send different content to each named slot, making the component more organized and flexible.

intermediate

How do you pass content to a named slot in Vue?

In the parent component, you wrap the content with a <template> tag and add the slot's name using the v-slot directive or # shorthand, like <template v-slot:header> or <template #header>.

advanced

What is a scoped slot in Vue?

A scoped slot allows the child component to pass data back to the parent through the slot. The parent can then use this data inside the slot content, making the slot dynamic and interactive.

What tag do you use inside a Vue component to create a slot?

A <content>

B <slot>

C <template>

D <div>

The tag defines a placeholder for content passed from the parent component.

How do you name a slot in Vue?

A <template name="header">

B <slot id="header">

C <slot name="header">

D <div slot="header">

You add a name attribute to the tag to create a named slot.

Which directive is used to pass content to a named slot in the parent component?

A v-for

B v-bind

C v-if

D v-slot

The v-slot directive (or # shorthand) is used to assign content to named slots.

What is the main benefit of scoped slots?

A They allow passing data from child to parent through slots

B They style slots automatically

C They prevent content from rendering

D They create global variables

Scoped slots let the child component send data to the parent inside the slot content.

If no slot content is provided by the parent, what happens to the default slot content?

A It is displayed inside the component

B It is hidden

C An error occurs

D The component does not render

Default slot content acts as fallback and is shown if the parent does not provide content.

Explain how slots help make Vue components more flexible and reusable.

Think about how you can insert different content inside the same component.

Describe the difference between a default slot, a named slot, and a scoped slot in Vue.

Consider how content is passed and if data flows back to the parent.

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