Vue JS Vue JS Slots and Scoped Slots

Question 1

What is the primary purpose of a slot in Vue JS?

Accepted Answer

A placeholder in a child component's template where parent-provided content is rendered

Answer

Slots are placeholders in child component templates that allow parent components to inject and render custom content in designated areas.

Question 2

Which built-in Vue element defines a slot inside a child component's template?

Accepted Answer

<slot>

Answer

The `<slot>` element is Vue's reserved element used in child templates to mark where parent-injected content should be rendered.

Question 3

What renders when a parent component does NOT provide content for a slot?

Accepted Answer

The fallback content placed between the slot's opening and closing tags

Answer

Any content written between `` and `` acts as fallback content and is displayed only when the parent provides nothing for that slot.

Question 4

How do you define a named slot called 'header' in a child component?

Accepted Answer

Answer

Named slots are declared in the child using the `name` attribute on the `` element, e.g., ``.

Question 5

How does a parent component target a named slot called 'footer'?

Accepted Answer

Answer

The `v-slot:slotName` directive is placed on a `<template>` element in the parent to route content into the matching named slot of the child.

Vue JS Practice Test