Detaillierte Analyse der Verwendungs- und Anwendungsszenarien von Slots in Vue

Was sind Slots?

Wir wissen, dass in Vue nichts in die Mitte des Child-Komponenten-Tags eingefügt werden kann.

Aber wenn wir Komponenten verwenden, möchten wir oft einige Tags außerhalb der Komponenten anpassen. Vue hat einen Slot-Mechanismus namens Scope Slot hinzugefügt. Die erforderliche Version ist 2.1.0+;

Slots sind eigentlich Platzhalter. Es nimmt einen Platz in Ihrer HTML-Vorlage in der Komponente ein und ermöglicht Ihnen, etwas einzufügen. Slots werden in anonyme Slots, benannte Slots und Slots mit begrenztem Bereich unterteilt.

In 2.6.0 haben wir eine neue einheitliche Syntax für benannte und bereichsbezogene Slots eingeführt (die v-slot-Direktive). Es ersetzt Slot und Slot-Scope

Anonyme Spielautomaten

Anonymer Slot, wir können ihn auch Einzelslot oder Standard-Slot nennen. Im Vergleich zu benannten Slots muss das Namensattribut nicht festgelegt werden und sein verstecktes Namensattribut ist die Standardeinstellung.

Vater.vue

Kind.vue

Bei anonymen Slots entspricht das Namensattribut dem Standard und Sie können es auch leer lassen, um den Standardwert zu verwenden.

Bei der Verwendung ist noch ein weiteres Problem zu beachten: Wenn mehr als zwei anonyme Slots vorhanden sind, wird der Inhalt des untergeordneten Tags in jedem Slot ersetzt.

Benannte Slots (vue2.6.0+ veralteter Slot='Name')

Wie der Name schon sagt, werden Slots benannt. Definition: Oder verwenden Sie eine einfache Abkürzung, um #header zu definieren. Verwendung: Umschließen Sie es mit einem Vorlagentag.

Vater.vue

Kind.vue

Hier wird die Verwendung mehrerer benannter Slots erläutert. Die Position des Slots wird nicht durch die Position des verwendeten Slots bestimmt, sondern durch die Position ersetzt, wenn dieser definiert wird.

Vater.vue

Kind.vue

Slots mit begrenztem Umfang

Es ist der Steckplatz, der zur Datenübertragung verwendet wird.

Wenn Sie Daten in einem Slot verwenden möchten, müssen Sie auf das Problem des Umfangs achten. In der offiziellen Vue-Dokumentation heißt es, dass der gesamte Inhalt der übergeordneten Vorlage im übergeordneten Umfang kompiliert wird; der gesamte Inhalt der untergeordneten Vorlage wird im untergeordneten Umfang kompiliert;

Um die Daten in der untergeordneten Komponente im Slot-Inhalt der übergeordneten Komponente verfügbar zu machen, können wir die Daten als Eigenschaft des Elements binden: v-bind:text="text"

Beachten:

Der Unterschied zwischen anonymen Bereichsslots und benannten Bereichsslots besteht in v-slot:defult="akzeptierter Name" (standardmäßig (anonymous kann weggelassen werden, das Gegenteil von benannt ist, den entsprechenden Namen zu schreiben)).

v-solt kann dekonstruieren und empfangen. Die von der Dekonstruktion empfangenen Felder müssen mit den übergebenen Feldern übereinstimmen. Beispiel: one entspricht v-slot="{one}"

Rendern

Zusammenfassen

Damit ist dieser Artikel über die Verwendung und Anwendungsszenarien von Slots in Vue abgeschlossen. Weitere Informationen zur Verwendung von Vue-Slots finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!