Slots - Podstawy
Witaj w Magazynie Modułów NOVA LAB! Tu każdy kontener cargo ma standaryzowane porty dokujące - możesz wpinać różną zawartość zachowując tę samą zewnętrzną strukturę. W Vue ten mechanizm to slots - pozwalają rodzicowi wstrzykiwać dowolną treść do komponentu dziecka.
Czym jest Slot?
Slot to miejsce w template komponentu dziecka, które rodzic może wypełnić własną treścią. To jak port dokujący w cargo bay - komponent definiuje gdzie jest otwór, a rodzic decyduje co w niego włożyć.
1<!-- CargoBay.vue (dziecko) -->
2<template>
3 <div class="cargo-bay">
4 <h2>Cargo Bay Alpha</h2>
5 <div class="content">
6 <slot></slot>
7 </div>
8 </div>
9</template>
10
11<!-- App.vue (rodzic) -->
12<template>
13 <CargoBay>
14 <p>Oxygen Tank OX-2087</p>
15 <p>Weight: 250 kg</p>
16 </CargoBay>
17</template>Rodzic umieszcza treść między tagami komponentu, a ta treść trafia w miejsce
<slot></slot>Fallback Content
Slot może mieć treść domyślną (fallback) - wyświetla się gdy rodzic nie przekaże nic:
1<!-- CargoBay.vue -->
2<template>
3 <div class="cargo-bay">
4 <slot>
5 <p>Cargo bay pusty - oczekuje na ekwipunek</p>
6 </slot>
7 </div>
8</template>
9
10<!-- Użycie bez treści - wyświetli fallback -->
11<CargoBay />
12
13<!-- Użycie z treścią - zastąpi fallback -->
14<CargoBay>
15 <p>Water Recycler Unit</p>
16</CargoBay>Slot Scope
Treść slotu jest kompilowana w scope rodzica, nie dziecka. To znaczy, że masz dostęp do danych rodzica:
1<!-- App.vue -->
2<script setup>
3import { ref } from 'vue'
4const moduleName = ref('Oxygen Generator')
5</script>
6
7<template>
8 <CargoBay>
9 <!-- moduleName pochodzi z RODZICA -->
10 <p>{{ moduleName }}</p>
11 </CargoBay>
12</template>Wiele elementów w slocie
Slot może przyjąć dowolną ilość elementów - tekst, HTML, a nawet inne komponenty:
1<template>
2 <CargoBay>
3 <h3>Critical Equipment</h3>
4 <ul>
5 <li>Oxygen Tank</li>
6 <li>Water Filter</li>
7 </ul>
8 <StatusBadge status="loaded" />
9 </CargoBay>
10</template>