Slots

Dynamic Slot Names

Vue allows dynamic slot names using v-slot:

<template v-slot:[dynamicSlotName]>
  <!-- content for the dynamic slot -->
</template>

Scoped Slots

Scoped slots allow passing data from the parent to the slot content. Use v-slot to receive and utilize slot props:

<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

Named Scoped Slots

Named scoped slots enable multiple slots in a component. Pass props to named slots:

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>
</MyComponent>

Fancy List Example

Scoped slots are handy for components like <FancyList>, letting the parent control item styling:

<FancyList>
  <template #item="{ body, username, likes }">
    <div class="item">
      <p>{{ body }}</p>
      <p>by {{ username }} | {{ likes }} likes</p>
    </div>
  </template>
</FancyList>

Renderless Components

Renderless components encapsulate logic without rendering. They use scoped slots for visual output:

<MouseTracker v-slot="{ x, y }">
  Mouse is at: {{ x }}, {{ y }}
</MouseTracker>

Fallthrough attributes and scoped slots enhance Vue component flexibility, providing powerful tools for customization.