Vue JS Vue JS Slots and Scoped Slots 2

Question 1

What is a scoped slot in Vue JS?

Accepted Answer

A slot that exposes child component data for the parent's slot content to consume

Answer

Scoped slots allow the child component to pass data upward to the parent's slot content, giving parents control over rendering using child-owned data.

Question 2

How does a child component pass data to a scoped slot?

Accepted Answer

By binding attributes on the element:

Answer

Slot props are passed by binding attributes directly on the `` element in the child, e.g., ``.

Question 3

How does a parent access data from a scoped slot?

Accepted Answer

<template v-slot:default="slotProps">{{ slotProps.item }}</template>

Answer

The parent assigns a variable name to `v-slot:slotName="slotProps"` which receives an object containing all bound slot props from the child.

Question 4

Which deprecated attribute was previously used for scoped slots before Vue 2.6?

Accepted Answer

slot-scope

Answer

The `slot-scope` attribute was the pre-2.6 scoped slot syntax, replaced by the unified `v-slot` directive introduced in Vue 2.6.

Question 5

What does `v-slot:default` specifically refer to?

Accepted Answer

The unnamed default slot of a component

Answer

`v-slot:default` targets the component's unnamed slot, which is the `<slot>` element without a `name` attribute.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Vue JS Slots and Scoped Slots 2