Komponenten

Vue.jsvuejs

Vue.js Dokumentation

Überblick

«Components» ermöglichen es, Logik und Darstellung in wiederverwendbare «Bausteine» zu verpacken.

Komponenten in Vue sind wie HTML-Tags zu verwenden. Sie haben einen Tag-Namen sowie optionale Properties (oder «Props»).

<HelloWorld text="Welt">

Wenn das Tag im Dokument platziert wird, generiert es einen vordefinierten Output:

<!-- Dieses Markup wird in <HelloWorld> definiert -->
<h1>Hallo Welt!</h1>

Man kann sich Komponenten auch als Funktion vorstellen. Die Eingabewerte (Props) generieren einen spezifischen Output:

HelloWorld(Props) -> "<h1>Hallo Welt!</h1>"

Eine Komponente erstellen

Neue Komponenten werden üblicherweise in einer eigenen Datei mit der Endung .vue definiert.

Im Vue Playground lassen sich neue Komponenten über das + Symbol neben App.vue erstellen.

Komponenten sollten in PascalCase (erster Buchstabe gross, jedes neue Wort gross) geschrieben werden.

Eine Komponente muss mindestens ein <script setup> oder einem <template> Teil haben.

Template

Der minimale Code für eine sichtbare Komponente ist das <template> Tag mit entsprechendem Inhalt:

<!-- HelloWorld.vue -->
<template>
    <h1>Hallo Welt!</h1>
</template>

Template Syntax

Innerhalb des <template> Bereichs kannst du mit {{ }} Variablen ausgeben.

Vue.jsvuejs

Vue.js Dokumentation

Logik

Eine Komponente kann in einem <script setup> Tag Logik definieren. Jede definierte Variable oder Funktion ist automatisch im <template>Bereich verfügbar. Der <script> Teil wird üblicherweise vor dem <template> Bereich positioniert.

<!-- HelloWorld.vue -->
<script setup>
const text = 'Welt'
</script>

<template>
    <h1>Hallo {{ text }}</h1>
</template>

Logik in Templates

Im <template> Bereich stehen dir einige «Direktiven» zur Verfügung, um Logik in Templates anzuwenden.

v-if

Mit v-if lässt sich ein Element aus dem DOM entfernen. v-if lässt sich mit v-else-if und v-else verketten.

<script setup>
const number = 1
</script>

<template>
    <div v-if="number > 0">
        Nummer ist grösser 0
    </div>
    <div v-else-if="number < 0">
        Nummer ist kleiner als 0
    </div>
    <div v-else>
        Nummer ist 0
     </div>
</template>

Vue.jsvuejs

Vue.js Dokumentation

v-for

Mit v-for kann eine Liste von Komponenten generiert werden.

Es ist wichtig, dass bei der Verwendung von v-for immer ein :key Attribut mit einem im Loop eindeutigen Wert (z. B. einer ID) gesetzt wird. Nur so kann Vue die einzelnen Elemente zwischen zwei Render-Aktionen eindeutig identifizieren.

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

const items = ref([
    { id: 1, text: "Item 1" },
    { id: 2, text: "Item 2" },
])
</script>

<template>
    <div v-for="item in items" :key="item.id">
        {{ item.text }}
    </div>
</template>

Vue.jsvuejs

Vue.js Dokumentation

Styles

Jede Komponente kann in einem <style> Tag Styles definieren. Wird das scoped Attribut verwendet, gelten die Styles nur für die aktuelle Komponente. Ansonsten sind sie global.

<!-- HelloWorld.vue -->
<script setup>
const text = 'Welt'
</script>

<template>
    <h1>Hallo {{ text }} in Rot</h1>
</template>

<style scoped>
h1 {
    color: red;
}
</style>

Properties definieren

Jede Komponente kann über die defineProps Funktion definieren, welche Props sie entgegennimmt.

Die defineProps Funktion wird im <script setup> Teil der Komponente aufgerufen. Sie verlangt ein Array von akzeptierten Props.

Alle definierten Props stehen im <template> Bereich als Variablen zur Verfügung.

Für weitere Details siehe Properties.

Properties

<!-- HelloWorld.vue -->
<script setup>
// Diese Komponente hat eine `text` Property
defineProps(['text'])
</script>

<template>
    <!-- Die `text` Property steht hier als Variable zur Verfügung -->
    <h1>Hallo {{ text }}!</h1>
</template>

Untenstehend ein Beispiel, wie eine solche Property an die <HelloWorld> Komponente übergeben wird:

<HelloWorld text="Welt" />

Komponente einbinden

Um eine Komponente zu verwenden, importiere sie mit Angabe des Komponenten-Namen und Pfad zur Vue-Datei:

<script setup>
// Importiere die Komponente aus `HelloWorld.vue` 
// als `HelloWorld` Komponente.
import HelloWorld from './HelloWorld.vue'
</script>

<template>
    <!-- Die Komponente steht jetzt hier zur Verfügung -->
     <HelloWorld text="Welt" />
</template>