Deine erste Komponente

Deine Café-App ist in den letzten Lektionen gewachsen: eine Überschrift, die Speisekarte, die Bestellung mit ihrer Summe, ein Formular … Alles steht in App.vue, und mit jeder neuen Funktion wird die Datei länger. In einer Datei mit mehreren hundert Zeilen dauert es, die Stelle zu finden, die du ändern willst. Und manche Teile wiederholen sich: Jeder Eintrag der Speisekarte sieht gleich aus, nur mit anderem Namen und Preis.

Deshalb bestehen Vue-Apps aus Komponenten: Teilen der Seite, jeder in einer eigenen .vue-Datei, mit eigener Vorlage, eigenem Skript und eigenem Stil. Eine kennst du schon: App.vue ist eine Komponente, die Hauptkomponente der App. Hier ist eine weitere, MenueEintrag.vue, ein einzelner Eintrag der Speisekarte:

<template>
    <li class="eintrag">
        <span>Espresso</span>
        <span class="preis">2 €</span>
    </li>
</template>

<style scoped>
.eintrag {
    display: flex;
    background: white;
}
</style>

Sie hat kein <script setup>, weil sie noch keine Variablen braucht. Ihr <style scoped> gestaltet nur die eigenen Elemente der Komponente: Ein Element mit der Klasse eintrag an anderer Stelle der App bekommt diesen Stil nicht.

Um die Komponente zu verwenden, importiert App.vue sie in ihrem <script setup> und setzt sie in ihre Vorlage, als wäre sie ein HTML-Element:

<script setup>
import MenueEintrag from "./MenueEintrag.vue";
</script>

<template>
    <h1>Café am Eck</h1>
    <ul class="menue">
        <MenueEintrag />
        <MenueEintrag />
    </ul>
</template>

Mit import MenueEintrag from "./MenueEintrag.vue"; kann App.vue die Komponente unter dem Namen MenueEintrag verwenden. ./ bedeutet „im selben Ordner wie diese Datei“, und das .vue am Ende ist Pflicht. Ohne es steht in der roten Leiste unter der Vorschau App.vue(2): Schreibe auch die Dateiendung dazu: „./MenueEintrag.vue“.

In der Vorlage wird <MenueEintrag /> durch die Vorlage der Komponente ersetzt. Der Tag schließt sich mit /> selbst, weil nichts in ihn hineingehört. Und du kannst eine Komponente so oft verwenden, wie du willst: Diese Liste hat zwei Einträge, beide von MenueEintrag erzeugt.

Mit Komponenten haben die Übungen mehr Tabs: zuerst App.vue, dann die Komponenten, dann die Dateien, die du schon kennst: main.js, index.html und style.css.