Vue3 Slots <slot>
Vue3 Options APIIn Vue3 sind Slots ein Mechanismus, der es einer übergeordneten Komponente ermöglicht, Inhalte an eine untergeordnete Komponente zu übergeben. Sie können sich einen Slot als reservierten "Platzhalter" in einer untergeordneten Komponente vorstellen, in den die übergeordnete Komponente beliebige Inhalte einfügen kann. Auf diese Weise kann die untergeordnete Komponente die von der übergeordneten Komponente übergebenen Inhalte flexibel anzeigen, ohne ihre eigene Struktur zu ändern.
Grundlegende Verwendung von Slots
Standard-Slot
Der Standard-Slot ist die einfachste Art von Slot. In einer Kindkomponente können Sie<slot>Tag, um einen Standard-Slot zu definieren. Wenn die Elternkomponente die Kindkomponente verwendet, kann sie Inhalt in diesen Slot einfügen.
Beispiel
<template>
<div class="child">
<h3>Dies ist der Titel der Kindkomponente</h3>
<slot>Standardinhalt</slot>
</div>
</template>
Beispiel
<template>
<ChildComponent>
<p>Dies ist der Inhalt, der von der Elternkomponente übergeben wird</p>
</ChildComponent>
</template>
In der Elternkomponente können wir<ChildComponent>Inhalt innerhalb des Tags einfügen, und dieser Inhalt ersetzt den<slot>Tag in der Kindkomponente. Wenn die Elternkomponente keinen Inhalt übergibt, zeigt die Kindkomponente den<slot>Standardinhalt innerhalb des Tags.
Benannte Slots
Benannte Slots ermöglichen es Ihnen, mehrere Slots in einer untergeordneten Komponente zu definieren und sie anhand des Namens zu unterscheiden. In der übergeordneten Komponente können Sie diev-slotDirektive, um anzugeben, in welchen Slot Inhalte eingefügt werden.
Beispiel
<template>
<div class="child">
<header>
<slot name="header">Standard-Inhalt für Header</slot>
</header>
<main>
<slot>Standard-Inhalt für Body</slot>
</main>
<footer>
<slot name="footer">Standard-Inhalt für Footer</slot>
</footer>
</div>
</template>
Beispiel
<template>
<ChildComponent>
<template v-slot:header>
<h1>Benutzerdefinierter Header-Inhalt</h1>
</template>
<p>Dies ist der Body-Inhalt, der von der übergeordneten Komponente übergeben wird</p>
<template v-slot:footer>
<p>Benutzerdefinierter Footer-Inhalt</p>
</template>
</ChildComponent>
</template>
Im obigen Beispiel haben wir drei Slots definiert:header、main(Standard-Slot) undfooter. Die übergeordnete Komponente verwendet diev-slotDirektive, um Inhalt in den entsprechenden Slot einzufügen.
Scoped Slots
Scoped Slots ermöglichen es einer untergeordneten Komponente, Daten an die übergeordnete Komponente zu übergeben, und die übergeordnete Komponente kann Inhalte basierend auf diesen Daten rendern. Dies ist sehr nützlich, wenn Sie die Rendering-Logik innerhalb der untergeordneten Komponente anpassen müssen.
Grundlegende Verwendung
In einer untergeordneten Komponente können Siev-bindverwenden, um Daten an den Slot zu übergeben. Die übergeordnete Komponente kann dann diev-slotDirektive, um diese Daten zu empfangen.
Beispiel
<template>
<div class="child">
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: 'Alice', age: 25 }
};
}
};
</script>
Beispiel
<template>
<ChildComponent v-slot="{ user }">
<p>Benutzername: {{ user.name }}</p>
<p>Benutzeralter: {{ user.age }}</p>
</ChildComponent>
</template>
In diesem Beispiel übergibt die Kindkomponente dasv-bindwirduserObjekt an den Slot, und die übergeordnete Komponente verwendet diev-slot="{ user }"um dieses Objekt zu empfangen, und rendert Inhalte basierend auf deruserDaten zurück.
Andere Erweiterungen