Properties

Vue.jsvuejs

Vue.js Dokumentation

Übergabe

Props lassen sich über die normale HTML-Syntax an Komponenten übergeben:

<HelloWorld 
    text="Welt!"
    fontSize="16"
    blink="false"
    color="#ff0000" 
/>

Hier gibt es aber einen wichtigen Punkt zu beachten: Mit dieser Syntax werden alle Props immer als String übergeben. Im Beispiel oben wäre fontSize also ein String "16" und blink ein String "false".

Datentyp erhalten

Möchtest du den Datentyp erhalten, muss ein Doppelpunkt : vor die Property gesetzt werden. Vue interpretiert den Wert einer Property so als JS-Code. Dadurch werden Variablen und spezifische Datentypen als Wert unterstützt.

Für Strings kannst du weiterhin die Schreibweise ohne Doppelpunkt verwenden. Für die Schreibweise mit Doppelpunkt musst du zwingend ' verwenden (siehe das color Beispiel):

<HelloWorld
    text="Welt!"
    :color="'#ff0000'"
    :fontSize="16" 
    :blink="false"
/>	

Variablen übergeben

Möchtest du einer Komponente den Wert einer Variable übergeben, muss die Property mit einem Doppelpunkt : geschrieben werden:

<script setup>
const text = ref('Welt!')
</script>

<template>
    <!-- Wert der `text` Variable übergeben -->
    <HelloWorld :text="text">
</template>

Variablen an native Tags übergeben

Wenn Variablen an native HTML-Tags übergeben werden müssen, musst du die Doppelpunkt : Variante verwenden. Variablen mit {{ }} in einer Property einzufügen ist nicht erlaubt.

<script setup>
const image = ref('http://example.org/image.jpg');
</script>

<template>
    <img :src="image" alt="">
</template>

Deklaration

In Vue werden Properties über die defineProps Funktion deklariert. Dabei gibt es verschiedene Möglichkeiten für diese Deklaration.

Einfache Deklaration

Die einfachste Deklaration für Properties ist ein Array von Strings, welches die Namen der erlaubten Properties definiert.

<script setup>
defineProps(['color', 'fontSize'])
</script>

<!--
    <HelloWorld color="#ff0000" fontSize="16">
-->

Typen-Deklaration

Nicht alle Properties sind Strings. Manchmal möchtest du explizit nur Integer oder Boolean Werte akzeptieren. In diesem Fall musst du der defineProps Funktion ein Objekt von Namen/Typen übergeben.

<script setup>
defineProps({
    color: String,
    fontSize: Integer,
})
</script>

<!--
    <HelloWorld color="#ff0000" :fontSize="16">
-->

Vue gibt in der JS-Konsole nun einen Fehler aus, wenn der Typ einer Property nicht stimmt.

Deklaration von optionalen Properties

Manchmal möchtest du eine Property nur optional entgegennehmen. Andere Properties möchtest du als «Pflicht» definieren. Dafür muss die Property-Deklaration um ein weiteres Objekt erweitert werden. Die required Eigenschaft bestimmt, ob eine Property «Pflicht» ist, oder optional.

<script setup>
defineProps({
    color: {
    	type: String,
        required: true,
    },
    size: {
        type: Number,
        required: false,
    },
})
</script>

Deklaration von Standard-Werten

Für optionale Properties kannst du über die default Eigenschaft ein Standard-Wert setzen.

<script setup>
defineProps({
    color: {
        type: String,
        required: false,
        default: 'Welt',
    },
    size: {
        type: Number,
        required: false,
        default: 16,
    },
})
</script>

Properties in <script setup> verwenden

Der Rückgabewert von defineProps enthält alle erhaltenen Property-Werte:

<script setup>
const props = defineProps(['text'])

// props.text gibt den Wert der Property "text" zurück.
// Hier wird der Wert in GROSSBUCHSTABEN konvertiert.
const uppercase = computed(() => props.text.toUpperCase());
</script>