`v-slot`

Names a slot and receives scoped slot props from a child component.

Since Vue 3.0 Spec ↗

Syntax

v-slot:name="slotProps" | #name="slotProps"

Parameters

Name	Type	Required	Description
`slotProps`	`object`	No	Props the child passes to the scoped slot.

Returns

directive — Supplies content for a named/scoped slot.

Examples

<!-- child: List.vue -->
<template>
  <li v-for="item in items" :key="item.id">
    <slot name="row" :item="item" />
  </li>
</template>

<!-- parent -->
<template>
  <List :items="users">
    <template #row="{ item }">
      <strong>{{ item.name }}</strong>
    </template>
  </List>
</template>

Notes

The shorthand is `#`. Use `#default` for the default slot and `#name` for named slots; destructure the slot props object passed by the child. v-slot must be on a <template> tag (or directly on the component for the lone default slot). Dynamic names: `#[dynamicName]`.