javascript / intermediate
Snippet
Logik-Entkopplung mit Scoped Slots
Scoped Slots ermöglichen es einer Kind-Komponente, Daten an den Slot-Inhalt des Parents zurückzugeben. Dieses Muster ist essenziell für flexible UI-Komponenten, bei denen der Parent das Rendering und das Kind den Datenfluss kontrolliert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- ListComponent.vue --><template><ul><li v-for="item in items" :key="item.id"><slot name="item" :data="item" :isLast="item.id === items.length">{{ item.defaultText }}</slot></li></ul></template><!-- Usage in Parent --><ListComponent :items="myList"><template #item="{ data, isLast }"><span :class="{ 'bold': isLast }">{{ data.label }}</span></template></ListComponent>
vue
Erklärung
1
<slot name="item" :data="item" ...>
Das Kind 'exponiert' Daten an den Slot über Attribute.
2
<template #item="{ data, isLast }">
Der Parent 'destrukturiert' die exponierten Daten für das eigene Rendering.