Mit den Requisiten von Vue können Sie benutzerdefinierte Attribute für eine Komponente registrieren. Erfahren Sie genau, wie Sie sie verwenden.
Eines der Hauptmerkmale von Vue ist seine modulare Architektur, die es Ihnen ermöglicht, Web-Apps durch die Kombination kleiner, wiederverwendbarer Komponenten zu erstellen. Dadurch können Sie Ihre Web-App einfach aktualisieren und warten.
Jede Komponente in Vue kann über einen eigenen Satz an Daten und Methoden verfügen, die Sie mit Requisiten an ihre untergeordneten Komponenten weitergeben können. Hier erfahren Sie, wie Sie Requisiten in Vue verwenden, um Daten von übergeordneten an untergeordnete Komponenten weiterzugeben.
Was sind Requisiten in Vue?
Requisiten – kurz für „Eigenschaften“ – sind benutzerdefinierte Attribute in Vue, die eine übergeordnete Komponente an ihre untergeordneten Komponenten weitergeben kann.
In Vue übergeben übergeordnete Komponenten Requisiten in einem unidirektionalen Fluss an untergeordnete Komponenten. Dies bedeutet, dass untergeordnete Komponenten diese übergebenen Requisiten nur lesen und nutzen, die Daten jedoch nicht ändern können.
Mithilfe von Requisiten können Sie wiederverwendbare Komponenten erstellen, die Sie in Ihrer gesamten Anwendung anwenden können. Requisiten sparen Ihnen Zeit und Mühe, da Sie Komponenten wiederverwenden können, anstatt neue Komponenten von Grund auf zu erstellen.
So übergeben Sie Requisiten in Vue
Das Übergeben von Requisiten in Vue ist einfach und unterscheidet sich von der Art und Weise, wie Sie übergeben werden Requisiten in React. Um in Vue eine Requisite von einer übergeordneten Komponente an ihre untergeordnete Komponente zu übergeben, verwenden Sie die Option „props“ im Skript der untergeordneten Komponente.
Hier ist ein Beispiel:
Die untergeordnete Komponente
<Vorlage>
<div>
<h1>{{ Titel }}h1>
<P>{{ Nachricht }}P>
<P>{{ E-Mail-Addresse }}P>
div>
Vorlage>
<Skript>
Standard exportieren {
Name: „ChildComponent“,
props: ["title", "message", "emailAddress"],
};
Skript>
Der obige Codeblock beschreibt eine untergeordnete Vue-Komponente, die Requisiten verwendet, um Daten von einer übergeordneten Komponente zu übergeben. Die Komponente enthält drei HTML-Elemente, die das anzeigen Titel, Nachricht, Und E-Mail-Addresse Eigenschaften mit Interpolation.
Der Requisiten Die Option in der untergeordneten Komponente nimmt ein Array von Eigenschaften auf. Dieses Array definiert die Eigenschaften, die die untergeordnete Komponente von der übergeordneten Komponente akzeptiert.
Hier ist ein Beispiel für eine übergeordnete Vue-Komponente, die Daten an die untergeordnete Komponente übergibt Requisiten:
übergeordnete Komponente
<Vorlage>
<div>
<untergeordnete Komponente
title="Hallo Welt"
message="Dies ist eine Nachricht von der übergeordneten Komponente"
emailAddress="[email protected]"
/>
div>
Vorlage><Skript>
importiere ChildComponent aus „./components/ChildComponent.vue“;
Standard exportieren {
Name: „ParentComponent“,
Komponenten: {
ChildComponent,
},
};
Skript>
Die übergeordnete Komponente im obigen Codeblock übergibt drei Requisiten an die untergeordnete Komponente. Der Codeblock übergibt statische Werte an den Titel, Nachricht, Und E-Mail-Addresse Requisiten.
Sie können mit auch dynamische Werte an Ihre Requisiten übergeben v-bind Richtlinie. v-bind ist eine Direktive Wird in Vue zum Binden von Daten verwendet zu HTML-Attributen.
Hier ist ein Beispiel für die übergeordnete Vue-Komponente, die das verwendet v-bind Direktive zur Übergabe dynamischer Werte an die Requisiten:
übergeordnete Komponente
<Vorlage>
<div>
<untergeordnete Komponente
:title= "Titel"
:message= "Nachricht"
:emailAddress= "emailAddress"
/>
div>
Vorlage><Skript>
importiere ChildComponent aus „./components/ChildComponent.vue“;
Standard exportieren {
Name: „ParentComponent“,
Komponenten: {
ChildComponent,
},
Daten() {
zurückkehren {
Titel: „Willkommen mein Lieber“,
Nachricht: „Wie geht es dir“,
E-Mail-Adresse: „[email protected]“,
};
},
};
Skript>
Verwendung der v-bind Mit der Direktive zum Übergeben von Daten an die untergeordnete Komponente können Sie die Werte der Requisiten basierend auf dem Status der übergeordneten Komponente aktualisieren. Zum Beispiel durch Ändern der Titel data-Eigenschaft in der übergeordneten Komponente, der Titel Die an die untergeordnete Komponente übergebene Requisite wird ebenfalls aktualisiert.
Diese Methode zum Definieren von Requisiten als Array von Zeichenfolgen ist ein Kurzschriftmuster. Jeder der Strings im Array stellt eine Requisite dar. Diese Methode ist ideal, wenn alle Requisiten im Array dasselbe haben JavaScript-Datentyp.
Definieren von Requisiten als Objekt in Vue
Das Definieren von Requisiten als JavaScript-Objekt statt als Array ermöglicht eine bessere Anpassung jeder einzelnen Requisite. Durch die Definition von Requisiten als Objekt in einer Komponente können Sie den erwarteten Datentyp und Standardwert jeder Requisite angeben.
Darüber hinaus können Sie bestimmte Requisiten als erforderlich markieren und so eine Warnung auslösen, wenn die Requisite bei Verwendung der Komponente nicht bereitgestellt wird. Die Definition von Requisiten als Objekt bietet mehrere Vorteile gegenüber der Definition von Requisiten als Array, darunter:
- Durch die Definition des erwarteten Datentyps und des Standardwerts für jede Requisite können Sie und Ihr Entwicklerteam leichter verstehen, wie die Komponente genau verwendet wird.
- Indem Sie Requisiten als erforderlich kennzeichnen, können Sie Fehler frühzeitig im Entwicklungsprozess erkennen und dem Entwicklerteam weitere Informationen zur Verfügung stellen.
Hier ist ein Beispiel dafür, wie man Requisiten als Objekt in einer Vue.js-Komponente definiert:
<Vorlage>
<div>
<h1>{{ Titel }}h1>
<P>{{ Nachricht }}P>
<P>{{ E-Mail-Addresse }}P>
div>
Vorlage>
<Skript>
Standard exportieren {
Name: „ChildComponent“,
Requisiten: {
Titel: {
Typ: Zeichenfolge,
Standard: „Standardtitel“,
},
Nachricht: {
Typ: Zeichenfolge,
Standard: „Standardnachricht“,
},
E-Mail-Addresse: {
Typ: Zeichenfolge,
erforderlich: wahr,
},
},
};
Skript>
Dieser Codeblock ist ein Beispiel für eine Vue.js-Komponente, die Requisiten verwendet, um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben. Der Codeblock definiert diese Requisiten als Objekte mit einem Typ und einem Standardwert oder einem erforderlichen Flag.
Der Codeblock definiert die Titel Und Nachricht Requisiten als Strings mit a Standard Wert und die E-Mail-Addresse Stütze als erforderlich Zeichenfolge.
Wählen Sie die beste Methode, die zu Ihrer Vue-App passt
Sie haben gelernt, wie Sie Requisiten sowohl als Array als auch als Objekt definieren. Ihre Präferenz sollte den spezifischen Anforderungen Ihrer App entsprechen.
Vue erweist sich als sehr flexibles JavaScript-Framework. Es bietet viele Methoden und Optionen, um dasselbe Ziel zu erreichen, mit unterschiedlichen Vorteilen für jede der Optionen oder Methoden, mit denen Sie arbeiten möchten.
