javascript / intermediate
Snippet
Flexible Layouts mit Scoped Slots
Scoped Slots ermöglichen es einer Kind-Komponente, Daten an ihr Elternteil zurückzugeben, sodass das Elternteil entscheiden kann, wie diese Daten gerendert werden sollen. Dies fördert die Wiederverwendbarkeit durch Entkopplung von Logik und Darstellung.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- ChildComponent.vue --><template><ul><li v-for="item in items" :key="item.id"><slot :item="item" :status="item.active ? 'Active' : 'Idle'"></slot></li></ul></template><!-- ParentComponent.vue --><template><ChildComponent :items="data"><template #default="{ item, status }"><span>{{ item.name }} - State: {{ status }}</span></template></ChildComponent></template>
vue
Erklärung
1
<slot :item="item">
Macht die lokale Variable 'item' für die Eltern-Komponente über den Slot verfügbar.
2
<template #default="{ item, status }">
Destrukturiert das bereitgestellte Objekt im Elternteil, um direkt im Template auf die Daten zuzugreifen.