Vue Academy · Lekcja

Tworzenie i rejestrowanie komponentów

Zdefiniują i zarejestrują Państwo komponenty globalnie oraz lokalnie.

Tworzenie i rejestrowanie komponentów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Dlaczego komponenty?

Komponenty pozwalają podzielić interfejs użytkownika na niezależne elementy, które można ponownie wykorzystać.

Każdy komponent zarządza własnym szablonem, logiką i stylem
Można łączyć je w większe struktury
Ułatwiają organizowanie i utrzymywanie kodu

Komponenty jednoplikowe

Komponent jednoplikowy (.vue) łączy trzy bloki w jednym pliku.

<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>

<style scoped>
p { color: teal; }
</style>

Definiowanie komponentu

Blok template zawiera znaczniki. Blok script zawiera logikę. Blok style zawiera kod CSS.

Style z atrybutem scoped dotyczą tylko tego komponentu
Szablony muszą mieć przejrzystą strukturę elementów

Nazwy komponentów

Zgodnie z konwencją nazwy plików komponentów i sposoby ich użycia zapisuje się w notacji PascalCase.

Plik: UserCard.vue
W szablonach: <UserCard />
PascalCase odróżnia komponenty od natywnych elementów HTML

Importowanie komponentu

Aby użyć komponentu, należy zaimportować go w miejscu, w którym jest potrzebny.

<script setup>
import UserCard from "./components/UserCard.vue"
</script>

<template>
  <UserCard />
</template>

Rejestracja lokalna (script setup)

W przypadku script setup samo zaimportowanie komponentu udostępnia go w szablonie. Nie jest potrzebny dodatkowy etap rejestracji.

<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>

<template>
  <Header />
  <main>Content</main>
  <Footer />
</template>

Rejestracja lokalna (Options API)

W Options API komponenty rejestruje się w opcji components.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

Rejestracja globalna

Rejestracja globalna za pomocą app.component sprawia, że komponent może być używany wszędzie bez importowania.

import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"

const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")

Globalnie czy lokalnie

Wybór zakresu rejestracji:

Globalna jest wygodna, ale powiększa pakiet i utrudnia śledzenie użycia
Lokalna korzysta z jawnych importów, ułatwia tree-shaking i wyraźniej pokazuje zależności

Z wyjątkiem kilku naprawdę uniwersalnych komponentów bazowych preferowana jest rejestracja lokalna.

Ponowne użycie komponentu

Tego samego komponentu można użyć wiele razy. Każda instancja działa niezależnie.

<template>
  <UserCard />
  <UserCard />
  <UserCard />
</template>

<!-- three separate instances,
     each with its own state -->

Zagnieżdżanie komponentów

Komponenty tworzą drzewo. Komponent nadrzędny może zawierać komponenty podrzędne, które z kolei mogą zawierać własne komponenty podrzędne.

<!-- App.vue -->
<template>
  <PageLayout>
    <ArticleList />
  </PageLayout>
</template>

<!-- ArticleList contains ArticleCard children -->

Szybki test

Proszę sprawdzić swoją znajomość rejestracji komponentów.

Podsumowanie: tworzenie komponentów

W tym rozdziale nauczyli się Państwo tworzyć i rejestrować komponenty:

Pliki .vue zawierają szablon, skrypt i style
Należy używać nazw w notacji PascalCase
script setup automatycznie rejestruje zaimportowane komponenty
Options API korzysta z opcji components
app.component() rejestruje komponent globalnie

Następnie: propsy i zdarzenia niestandardowe.

Często zadawane pytania

Czy lekcja „Tworzenie i rejestrowanie komponentów” jest bezpłatna?

Tak — pełny tekst „Tworzenie i rejestrowanie komponentów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Tworzenie i rejestrowanie komponentów”?

Zdefiniują i zarejestrują Państwo komponenty globalnie oraz lokalnie. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Tworzenie i rejestrowanie komponentów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Tworzenie i rejestrowanie komponentów
Props i własne zdarzenia
Sloty i sloty zakresowe

← Powrót do Vue Academy