Kapitel 15: Komponenten-Grundlagen

📙 Lernziel: Was sind Komponenten und wie erstellt man sie?

---

15.1 Was sind Komponenten?

Komponenten sind wiederverwendbare Vue-Instanzen mit eigenem HTML, CSS und JavaScript.

Vorteile:

• ✅ Wiederverwendbarkeit (einmal schreiben, oft nutzen)
• ✅ Übersichtlichkeit (Code-Strukturierung)
• ✅ Wartbarkeit (isolierte Logik)
• ✅ Teamarbeit (parallele Entwicklung)

Analogie:

• Webseite = Mensch
• Komponenten = Organe (Herz, Lunge, etc.)
• Jedes Organ hat eine spezifische Funktion

Beispiel:

<!-- ButtonKomponente -->
<script setup>
const props = defineProps({
  text: String
})

const emit = defineEmits(['click'])
</script>

<template>
  <button @click="emit('click')">
    {{ text }}
  </button>
</template>

<style scoped>
button {
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

Verwendung:

<script setup>
import MyButton from './MyButton.vue'
</script>

<template>
  <MyButton text="Klick mich!" @click="handleClick" />
</template>

---

15.2 Komponenten erstellen (Single File Component)

Vue Single File Component (SFC) - Datei mit .vue Erweiterung.

Struktur einer SFC:

<script setup>
// Logik (JavaScript)
</script>

<template>
  <!-- HTML Template -->
</template>

<style scoped>
/* CSS (scoped = nur für diese Komponente) */
</style>

Beispiel: HelloWorld.vue

<script setup>
import { ref } from 'vue'

const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

<style scoped>
h1 {
  color: #42b883;
}
</style>

---

15.3 Komponenten registrieren und verwenden

In Vue 3 (<script setup>) müssen Komponenten nicht explizit registriert werden!

Beispiel:

<!-- App.vue (Hauptkomponente) -->
<script setup>
// Importieren = Automatische Registrierung
import HelloWorld from './components/HelloWorld.vue'
import MyButton from './components/MyButton.vue'
</script>

<template>
  <div>
    <h1>Meine App</h1>
    <!-- Komponenten verwenden -->
    <HelloWorld />
    <MyButton />
  </div>
</template>

<style>
/* Global Styles */
</style>

Wichtig:

• ✅ <script setup> = Automatische Registrierung
• ✅ Kein components: {} nötig!
• ✅ PascalCase empfohlen (MyComponent.vue)

---

15.4 Komponenten-Benennung

Zwei Konventionen:

1. PascalCase (Empfohlen): MyComponent.vue
2. kebab-case: my-component.vue

Verwendung im Template:

<template>
  <!-- PascalCase -->
  <MyComponent />
  
  <!-- kebab-case (funktioniert auch) -->
  <my-component />
</template>

Empfehlung:

• Dateiname: PascalCase (MyComponent.vue)
• Template: PascalCase (<MyComponent />)

---

15.5 Übung: Eigene Komponente erstellen

Aufgabe: Erstelle eine UserCard.vue Komponente.

Lösung:

<!-- components/UserCard.vue -->
<script setup>
defineProps({
  name: String,
  age: Number,
  city: String
})
</script>

<template>
  <div class="user-card">
    <h3>{{ name }}</h3>
    <p>Alter: {{ age }}</p>
    <p>Stadt: {{ city }}</p>
  </div>
</template>

<style scoped>
.user-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin: 10px;
  max-width: 300px;
}

.user-card h3 {
  color: #42b883;
  margin-top: 0;
}
</style>

Verwendung in App.vue:

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

<template>
  <div>
    <UserCard name="Max" :age="25" city="Berlin" />
    <UserCard name="Anna" :age="30" city="München" />
  </div>
</template>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was Komponenten sind und ihre Vorteile
• ✅ Vue SFC (Single File Component) Struktur
• ✅ Komponenten erstellen, importieren und verwenden
• ✅ Benennungskonventionen
• ✅ Praxis: UserCard.vue Komponente

🎯 Nächster Schritt: In Kapitel 16 lernst du Komponenten-Kommunikation (Props & Emits)!

---

← Zurück zu Kapitel 14: StilbindungWeiter zu Kapitel 16: Props & Emits →