Vue Academy · Lektion

Komponenten erstellen und registrieren

Definieren und registrieren Sie Komponenten global und lokal

Komponenten erstellen und registrieren ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Warum Komponenten?

Komponenten ermöglichen es Ihnen, eine Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufzuteilen.

Jede Komponente verwaltet ihr eigenes Template, ihre eigene Logik und ihren eigenen Style
Sie setzen sie zu größeren Strukturen zusammen
Dadurch bleibt der Code übersichtlich und wartbar

Single-File-Komponenten

Eine Single-File-Komponente (.vue) bündelt drei Blöcke in einer Datei.

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

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

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

Eine Komponente definieren

Der template-Block enthält das Markup. Der script-Block enthält die Logik. Der style-Block enthält CSS.

scoped-Styles gelten nur für diese Komponente
Templates benötigen eine klare Struktur aus Elementen

Komponentennamen

Konventionell werden Komponentendateien und ihre Verwendung in PascalCase geschrieben.

Datei: UserCard.vue
In Templates: <UserCard />
PascalCase unterscheidet Komponenten von nativem HTML

Eine Komponente importieren

Um eine Komponente zu verwenden, importieren Sie sie dort, wo Sie sie benötigen.

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

<template>
  <UserCard />
</template>

Lokale Registrierung (script setup)

Bei script setup genügt es, eine Komponente zu importieren, damit sie im Template verfügbar ist. Ein zusätzlicher Registrierungsschritt ist nicht erforderlich.

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

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

Lokale Registrierung (Options API)

Bei der Options API registrieren Sie Komponenten in der Option components.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

Globale Registrierung

Durch die globale Registrierung mit app.component kann eine Komponente überall verwendet werden, ohne sie zu importieren.

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")

Global oder lokal

Den passenden Registrierungsbereich auswählen:

Global ist praktisch, vergrößert aber das Bundle und erschwert es, die Verwendung nachzuverfolgen
Lokal bedeutet explizite Importe, besseres Tree-Shaking und klarere Abhängigkeiten

Bevorzugen Sie die lokale Registrierung, außer bei wenigen wirklich universell einsetzbaren Basiskomponenten.

Eine Komponente wiederverwenden

Dieselbe Komponente kann viele Male verwendet werden. Jede Instanz ist unabhängig.

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

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

Komponenten verschachteln

Komponenten bilden einen Baum. Eine übergeordnete Komponente kann untergeordnete Komponenten enthalten, die wiederum eigene untergeordnete Komponenten enthalten.

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

<!-- ArticleList contains ArticleCard children -->

Kurztest

Testen Sie Ihr Verständnis der Komponentenregistrierung.

Zusammenfassung: Komponenten erstellen

Sie haben gelernt, Komponenten zu erstellen und zu registrieren:

.vue-Dateien enthalten Template, Script und Style
Verwenden Sie Namen in PascalCase
script setup registriert importierte Komponenten automatisch
Die Options API verwendet die Option components
app.component() registriert Komponenten global

Als Nächstes: Props und benutzerdefinierte Events.

Häufig gestellte Fragen

Ist die Lektion „Komponenten erstellen und registrieren“ kostenlos?

Ja — der vollständige Text von „Komponenten erstellen und registrieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Komponenten erstellen und registrieren“?

Definieren und registrieren Sie Komponenten global und lokal Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „Komponenten erstellen und registrieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy