What is a scoped slot?

VueJunior~1 min read

A scoped slot is a slot that lets you pass data from a child component to the parent, along with markup.

In other words:

A scoped slot is a slot with access to the child's data. The child "shares" its data, and the parent decides how to render it.

This makes the component more flexible and lets you implement the "render props" pattern.

The classic problem scoped slots solve

A regular slot only passes markup from parent to child.

But sometimes you need the opposite:

the child knows the data
but the parent should decide how to display it

For example:

a list component passes each list item
the parent decides how to style each item

Regular slots don't allow this.

How does a scoped slot work?

The child component passes data into the slot via props:

vue

<!-- Child.vue -->
<template>
  <slot :user="user"></slot>
</template>

user is data inside the child component.

The parent receives the data via v-slot

vue

<!-- Parent.vue -->
<Child v-slot="{ user }">
  <p>{{ user.name }}</p>
</Child>

The parent receives the { user } object that came from the child.

Example: a list with a scoped slot

The child component:

vue

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

<script>
export default {
  props: ['items']
}
</script>

The parent component:

vue

<ItemList :items="products" v-slot="{ item }">
  <strong>{{ item.title }}</strong> - {{ item.price }}$
</ItemList>

The parent decides how to display item, even though the data lives in the child component.

Why are scoped slots needed?

1. Passing data from child to parent

Regular slots pass only markup - scoped slots also pass props.

2. Display flexibility

The parent can fully control how the data is rendered.

3. Building universal components

For example:

a universal list
a table
a dropdown
a carousel
a card grid

The component provides the data, the parent provides the design.

4. The "Render Props" pattern

Scoped slots are Vue's implementation of React's render props.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.