Detaillierte Erklärung der Slots in Vue

Die Wiederverwendung von Code in Vue liefert uns Mixnis. Die Wiederverwendung von Vorlagen liefert uns Slots.

Slot-Klassifizierung

Standardsteckplätze

Benannte Slots

Slots mit begrenztem Umfang

Wenn wir in unsere Komponente nur ein HTML-Tag einfügen müssen, können wir den Standardsteckplatz verwenden.

Wenn es mehrere gibt, müssen wir dem ersten Steckplatz einen Namen geben, um zu entscheiden, in welchen Steckplatz er eingefügt werden soll.

Wenn wir Daten von einer Komponente in unserem Slot verwenden möchten, können wir einen Slot mit eingeschränktem Gültigkeitsbereich verwenden.

Nachfolgend sehen Sie die Verwendung des Standardsteckplatzes

Bei der Verwendung

Das Obige ist die Verwendung des Standardsteckplatzes

Benannte Slots, das heißt, wir definieren einen oder mehrere Slots in einer Komponente und geben dem Slot einen Namen, um zu unterscheiden, welcher Slot darauf einwirkt.

Bei der Verwendung

Hier möchte ich sagen, dass die Version Vue 2.6 eine neue Art hat, Slots zu schreiben, die das Template-Tag verwendet. Wir wissen, dass Template nur ein Wrapping-Tag ist, es wird nicht auf der echten Seite gerendert. Die neue Art, Slots zu schreiben, verwendet es. Ohne es geht es nicht, wie unten gezeigt

Lassen Sie uns über eingeschränkte Slots sprechen.

Schauen wir uns die Daten an, die von den beiden Slots oben angezeigt werden. Sie sind alle in den Daten der Info-Komponente platziert, dem Benutzer des Slots.

Manchmal sind diese Daten den Benutzern jedoch egal und sie werden aus der Kategoriekomponente selbst bezogen.

Der Benutzer „Info“ muss lediglich die Präsentation des Inhalts im Slot verwalten.

Hier kommen Scoped Slots ins Spiel

In der obigen Abbildung sehen Sie, dass im Bereichsslot zwei Daten an den Benutzer übergeben werden

Wie hat der Benutzer es erhalten?

Oben sind die drei in Vue verwendeten Slot-Typen aufgeführt.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!