Wofür werden Slots in Vue verwendet und wie…

Slots in Vue werden verwendet, um Inhalte von außen in Komponenten einzufügen. Dies ermöglicht die Erstellung flexibler und wiederverwendbarer Komponenten.

Es gibt drei Arten von Slots:

Standard-Slots (Default Slots): Werden verwendet, um Hauptinhalte einzufügen.

<template>
  <div>
    <slot></slot>
  </div>
</template>

Verwendung:

<mein-komponent>
  <p>Dieser Inhalt wird in den Standard-Slot eingefügt.</p>
</mein-komponent>

Benannte Slots (Named Slots): Ermöglichen das Einfügen von Inhalten in bestimmte Slots innerhalb der Komponente, die nach Namen unterschieden werden.

<template>
  <div>
    <slot name="header"></slot>
    <div>Hauptinhalt der Komponente</div>
    <slot name="footer"></slot>
  </div>
</template>

Verwendung:

<mein-komponent>
  <template v-slot:header>
    <h2>Überschrift</h2>
  </template>
  <template v-slot:footer>
    <p>Fußzeile</p>
  </template>
</mein-komponent>

Kurzsyntax für v-slot:

<mein-komponent>
  <template #header>
    <h2>Überschrift (Kurzsyntax)</h2>
  </template>
</mein-komponent>

Scoped Slots: Ermöglichen es, dass das Kind-Component Daten an das Eltern-Component übergibt, die beim Rendern des Slots verwendet werden können.

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

Verwendung:

<meine-liste :items="['Apfel', 'Banane', 'Orange']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</meine-liste>

Destrukturierung von slotProps:

<meine-liste :items="['Apfel', 'Banane', 'Orange']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destrukturierung)
  </template>
</meine-liste>

Slots funktionieren, indem sie "Plätze" innerhalb der Vorlage des Kind-Components erstellen, in die das Eltern-Component eigenen Inhalt einfügen kann. Beim Rendern ersetzt Vue das <slot>-Tag (oder <slot name="...">) durch den vom Eltern-Component bereitgestellten Inhalt. Bei Scoped Slots sind die Daten des Kind-Components über das Argument-Objekt der Slot-Vorlage im Eltern-Component zugänglich.

Wofür werden Slots in Vue verwendet und wie funktionieren sie?