Rejestracja i Import Komponentów

Dr. Nova wyjaśnia: "W NOVA LAB każdy moduł habitatu musi być oficjalnie zarejestrowany w systemie stacji, zanim będzie mógł funkcjonować. Podobnie komponenty Vue muszą być zaimportowane lub zarejestrowane, aby można ich było użyć w szablonie."

Import w

<script setup>

Najczęstszy i zalecany sposób to import lokalny w bloku

<script setup>

. Zaimportowany komponent jest automatycznie dostępny w szablonie - nie trzeba go nigdzie rejestrować!

1<!-- MissionControl.vue -->
2<template>
3  <div class="control-panel">
4    <ModuleCard />
5    <StatusBar />
6    <AlertPanel />
7  </div>
8</template>
9
10<script setup>
11// Wystarczy zaimportować - komponent jest od razu dostępny w template!
12import ModuleCard from './components/ModuleCard.vue'
13import StatusBar from './components/StatusBar.vue'
14import AlertPanel from './components/AlertPanel.vue'
15</script>

Zwróć uwagę: w Options API (bez

<script setup>

) musielibyśmy dodatkowo rejestrować komponenty w opcji

components: {}

. W Composition API z

<script setup>

ten krok jest zbędny - Vue automatycznie rozpoznaje zaimportowane komponenty.

1<!-- Options API - wymaga ręcznej rejestracji -->
2<script>
3import ModuleCard from './components/ModuleCard.vue'
4
5export default {
6  components: {
7    ModuleCard  // Konieczna rejestracja!
8  }
9}
10</script>
11
12<!-- Composition API <script setup> - auto-rejestracja -->
13<script setup>
14import ModuleCard from './components/ModuleCard.vue'
15// Gotowe! Nie trzeba nic więcej.
16</script>

Rejestracja Globalna

Jeśli komponent jest używany w wielu miejscach aplikacji (np. przycisk, ikona), możesz go zarejestrować globalnie w pliku

main.js

:

1// main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import BaseButton from './components/common/BaseButton.vue'
5import BaseIcon from './components/common/BaseIcon.vue'
6
7const app = createApp(App)
8
9// Rejestracja globalna - dostępne wszędzie bez importu
10app.component('BaseButton', BaseButton)
11app.component('BaseIcon', BaseIcon)
12
13app.mount('#app')

Po rejestracji globalnej komponent jest dostępny w każdym szablonie bez konieczności importowania:

1<!-- Dowolny komponent w aplikacji -->
2<template>
3  <BaseButton>Uruchom moduł</BaseButton>
4  <BaseIcon name="rocket" />
5</template>
6
7<script setup>
8// Nie trzeba importować BaseButton ani BaseIcon!
9</script>

Lokalne vs Globalne - Kiedy Co Wybrać?

| Cecha | Import lokalny | Rejestracja globalna | |-------|---------------|---------------------| | Dostępność | Tylko w komponencie, który importuje | Wszędzie w aplikacji | | Tree-shaking | Tak - nieużywane komponenty są usuwane z buildu | Nie - zawsze w bundlu | | Czytelność | Widać zależności w

<script setup>

| Ukryte zależności | | Zastosowanie | Większość komponentów | Bazowe, często używane (Base*, App*) |

Zalecenie Vue: Używaj importu lokalnego jako domyślnego. Rejestruj globalnie tylko komponenty bazowe używane bardzo często.

PascalCase vs kebab-case w Szablonie

Vue pozwala używać obu konwencji nazewnictwa w szablonach:

1<script setup>
2import ModuleCard from './ModuleCard.vue'
3import StatusBar from './StatusBar.vue'
4</script>
5
6<template>
7  <!-- PascalCase (zalecane w SFC) -->
8  <ModuleCard />
9  <StatusBar />
10
11  <!-- kebab-case (też działa) -->
12  <module-card />
13  <status-bar />
14</template>

PascalCase jest zalecane w Single File Components (

.vue

), bo:

• Łatwiej odróżnić komponenty Vue od natywnych elementów HTML

• <ModuleCard />

  to komponent,

  <div>

  to HTML
• Lepsza czytelność i spójność z nazwą pliku