What Is a Scoped Slot in Vue?

In Vue, a "scoped slot" lets a component's content be customised with data that comes from the component itself. The child exposes data to its slot, and the parent decides how to display it — the parent sends its own structure (HTML, other components) into the child's slot, using the child's data.

Scoped slots give flexibility when building reusable components: the content can change dynamically depending on the data, so the same component works in many different situations.

Example:

Child component: the child contains a <slot> and passes data to it through attributes, which makes it a scoped slot.

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :user="userData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: { name: 'John Doe', age: 30 },
    };
  },
};
</script>

Parent component: the parent fills the child's slot with its own markup and the data it receives.

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>User name: {{ slotProps.user.name }}</p>
      <p>User age: {{ slotProps.user.age }}</p>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>

Here ChildComponent offers a slot with the user's data, and ParentComponent fills it with its own HTML to show that data. Scoped slots make data exchange and reuse between components easier.