So verwenden Sie Slots zum Verteilen von Inhalten in Vue

Vue ist ein beliebtes Front-End-Framework, das eine bequeme Möglichkeit zum Verwalten und Organisieren von Komponenten auf der Seite bietet. Unter anderem ist Slot eine sehr praktische Funktion in Vue, die uns dabei helfen kann, Inhalte dynamisch in Komponenten zu verteilen. In diesem Artikel wird die Verwendung von Slots zum Verteilen von Inhalten in Vue vorgestellt und einige zusätzliche Verwendungszwecke und Vorsichtsmaßnahmen bereitgestellt.

1. So funktioniert Slot

In Vue wird Slot verwendet, um einen Slot für eine untergeordnete Komponente in der Vorlage der übergeordneten Komponente bereitzustellen, sodass die untergeordnete Komponente Inhalte direkt in die Vorlage der übergeordneten Komponente einfügen kann. Wenn Sie Slots verwenden, fügen Sie normalerweise das Slot-Tag in der Vorlage der übergeordneten Komponente hinzu und fügen benannte Slots und Standard-Slots in der untergeordneten Komponente hinzu.

Der Standard-Slot ist ein Slot ohne Namen, der zum Einfügen einiger Standardinhalte in Unterkomponenten verwendet werden kann. Standard-Slots werden mit dem speziellen Platzhalter definiert.

Benannte Slots werden über das Namensattribut definiert, und Sie können den benannten Slot angeben, in den Inhalte in der übergeordneten Komponentenvorlage eingefügt werden sollen. Zum Beispiel:

Dies ist ein Inhalt

In diesem Beispiel verwendet die übergeordnete Komponente benannte Slots, um die Position der Kopf- und Fußzeile in der Vorlage anzugeben, und verwendet außerdem den Standard-Slot. Slot, um die Position des p-Elements anzugeben.

2. Verwendung von Slots

In Vue gibt es für Slots auch einige häufige Verwendungszwecke, die unseren Code prägnanter, flexibler und leistungsfähiger machen können.

2.1 Exklusiver Standard-Slot

Manchmal möchten wir untergeordnete Komponenten den Standard-Slot belegen lassen, anstatt Inhalte an die übergeordnete Komponente zu verteilen. In diesem Fall können wir die Direktive v-slot:default verwenden, um Vue anzuweisen, den Standard-Slot als Vorlage für die Unterkomponente zu verwenden. Zum Beispiel:

In diesem Beispiel Wir geben den Standardsteckplatz als Vorlage für die untergeordnete Komponente an und erzielen so den Effekt des „Einfügens der untergeordneten Komponente in die übergeordnete Komponente“.

2.2 Scoped Slot

Manchmal möchten wir möglicherweise auf die Daten der untergeordneten Komponente in der übergeordneten Komponente zugreifen. In diesem Fall können wir den Scoped Slot verwenden, um die Daten der untergeordneten Komponente an die übergeordnete Komponente zu übergeben. Bereichsslots werden mithilfe von Slot-Tags mit Parametern definiert, bei denen es sich um die Daten handelt, die vom Slot an die übergeordnete Komponente übergeben werden. Zum Beispiel:

< ; p>{{ slotProps.msg }}