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>