Komponenteneigenschaften

• 6 Minuten

HTML-Elemente sind die Bausteine zum Erstellen von Seiten. Sie können ihr Verhalten konfigurieren, indem Sie Attribute auf verschiedene Werte festlegen. Wie bereits erwähnt, ähnelt das Erstellen einer Komponente dem Erstellen eines benutzerdefinierten HTML-Tags. Daher können Sie Informationen übergeben, um die Wiederverwendung von Komponenten durch Eigenschaften zu verbessern.

Definieren von Eigenschaften

Eigenschaften sind eine Gruppe von Werten, die Sie an eine Komponente übergeben können. Normalerweise fügen Sie einer Komponente Eigenschaften hinzu, um die Werte zu übergeben, die angezeigt werden sollen, oder die ihr Verhalten auf andere Weise ändern.

Sie definieren die Eigenschaften für eine Komponente, indem Sie das props-Feld innerhalb des script-Elements hinzufügen. Sie können die Namen der Eigenschaften einer Komponente auflisten, indem Sie diese in einem Array auflisten:

<!-- UserDisplay component -->
<script>
export default {
    name: 'UserDisplay',
    props: ['name', 'age']
}
</script>

Der Aufrufer der Komponente legt die Eigenschaften fest, indem die gleiche Syntax wie ein HTML-Attribut verwendet wird. Wenn wir die vorherige Komponente verwenden, können wir name und age wie folgt festlegen:

<!-- inside parent component -->
<template>
    <user-display name='Cheryl' age='28'></user-display>
</template>
<script>
import UserDisplay from './UserDisplay.vue';
export default {
    components: {
        UserDisplay
    }
}
</script>

Die Werte Cheryl und 28 werden durch eine Attributbindung jeweils an die name und age-Eigenschaften gebunden.

Beschränken von Typen

Das aufrufende Element kann Werte eines beliebigen Typs übergeben, indem es sie als Teil eines Arrays auflistet. Diese Methode ist für einfache Anwendungen geeignet, doch oft sollten Sie angeben, welche Datentypen Sie für die einzelnen Eigenschaften erwarten.

Sie können stabilere Informationen über die Eigenschaften bereitstellen, indem Sie ein Schema definieren. Wenn Sie angeben möchten, dass name eine Zeichenfolge sein sollte und age eine Zahl sein soll, können Sie das Eigenschaftsschema wie folgt definieren:

<!-- UserDisplay component script -->
<script>
export default {
    name: 'UserDisplay',
    props: {
        name: String,
        age: Number
    }
}
</script>

Beachten Sie, dass Sie ein Eigenschaftsobjekt mit den Typen für name und age erstellen. Diese Komponente akzeptiert jetzt nur die angegebenen Datentypen. Sie können sie weiterhin wie zuvor festlegen:

<!-- inside parent component -->
<user-display name='Cheryl' age='28'></user-display>

Wenn Sie jedoch Datentypen auf Werte festlegen, die nicht mit dem Schema übereinstimmen, z. B. das Übergeben einer Zahl an name, wird in der Konsole eine Warnung angezeigt. In der Warnung werden Sie aufgefordert, entsprechende Maßnahmen zu ergreifen.

Komplexe Objekte

Wenn Sie mit Vue arbeiten, arbeiten Sie in der Regel mit Objekten und nicht mit einzelnen Werten. Glücklicherweise können Sie komplexe Strukturen mithilfe von Eigenschaften deklarieren.

Wenn Sie ein User-Objekt mit den Eigenschaften name und age verwenden, können Sie dieses Objekt in ihren Eigenschaften als vollständiges Konstrukt deklarieren:

<!-- UserDisplay component script -->
<script>
export default {
    name: 'UserDisplay',
    props: {
        user: {
            name: String,
            age: Number
        }
    }
}
</script>

Sie können den Wert wie zuvor mit dem-Attribut festlegen. Außerdem können Sie dynamische Daten übergeben, indem Sie den Namen des Objekts angeben, das Sie verwenden möchten. Im folgenden Beispiel wird ein Datenelement mit dem Namen user mit derselben Syntax wie statische Werte übermittelt:

<!-- parent component -->
<template>
<user-display :user="user"></user-display>
</template>

<script>
import UserDisplay from './UserDisplay.vue';
export default {
    data() {
        return {
            user: {
                firstName: 'Cheryl',
                age: 28
            }
        }
    },
    components: {
        UserDisplay
    }
}
</script>

Verwenden von Eigenschaften innerhalb einer Komponente

Innerhalb einer Komponente können Eigenschaften auf die gleiche Weise wie Daten gelesen werden. Die vollständige UserDisplay-Komponente könnte wie folgt aussehen:

<template>
    <div>Name: {{ user.name }}</div>
    <div>Age: {{ user.age }}</div>
</template>
<script>
export default {
    name: 'UserDisplay',
    props: {
        user: {
            name: String,
            age: Number
        }
    }
}
</script>