Zusammenfassung der Vue3-Slot-Nutzung

1. Einführung in den V-Slot

v-slot kann nur in template oder Komponenten verwendet werden, andernfalls wird ein Fehler gemeldet.

v-slot ist auch eine der Anweisungen.

Anwendungsbeispiel:

//Code der übergeordneten Komponente <child-com> 
 <Vorlage v-slot:nameSlot> 
  Slot-Inhalt</template> 
</child-com> 
 
//Komponentenvorlage <slot name="nameSlot"></slot> 
Die Syntax von v-slot vereinfacht die Funktionen von Slot- und Slot-Scope-Slots und macht sie leistungsfähiger und effizienter.

2. Anonyme Spielautomaten

Wenn in einer Komponente nur ein Slot vorhanden ist, kann slot name Attribut ungesetzt bleiben und v-slot kann ohne Parameter verwendet werden. v-slot hat jedoch auch einen impliziten „Standard“ in dem Slot, in dem das Namensattribut nicht gesetzt ist.

Anonyme Slot-Nutzung:

//Komponentenaufruf <child-com> 
 <Vorlage V-Steckplatz> 
  Slot-Inhalt</template> 
</child-com> 
 
//Komponentenvorlage <slot ></slot> 

Obwohl für v-slot keine Parameter festgelegt sind, kann er nicht gelöscht werden, da der Slot-Inhalt sonst nicht normal gerendert werden kann.

3. Benannte Slots

Wenn eine Komponente mehrere Slots enthält und der Attributwert „v-slot“ nicht festgelegt ist, wird das Element standardmäßig ohne Attributwert „name“ in die Slot-Komponente eingefügt. Um das entsprechende Element an der angegebenen Position zu platzieren, müssen Sie v-slot und name verwenden, um den Inhalt abzugleichen.

Benannte Slots verwenden:

//Übergeordnete Komponente <child-com> 
 <Vorlage v-slot:header> 
  Kopfzeile</template> 
 <Vorlage v-slot:body> 
  Inhalt</template> 
 <Vorlage v-slot:footer> 
  Füße 
</child-com> 
     
//Unterkomponente <div> 
 <slot name="header"></slot> 
 <slot name="body"></slot> 
 <slot name="Fußzeile"></slot> 
</div> 

Abkürzungen für benannte Slots:

v-slot wie die Anweisungen v-bind und v-on , ebenfalls Abkürzungen. v-slot: kann mit # abgekürzt werden.

Wie oben erwähnt, kann v-slot:footer zu #footer verkürzt werden.

Der obige Code der übergeordneten Komponente kann wie folgt vereinfacht werden:

<child-com> 
 <Vorlage #header> 
  Kopfzeile</template> 
 <Vorlage #body> 
  Inhalt</template> 
 <Vorlage #Fußzeile> 
  Füße 
</child-com> 

Hinweis: Wie bei anderen Befehlen auch, sind Abkürzungen nur erlaubt, wenn Parameter vorhanden sind, sonst sind sie ungültig.

4. Slots mit begrenztem Umfang

Manchmal ist es sinnvoll, Slot-Inhalten Zugriff auf Daten zu gewähren, die nur in untergeordneten Komponenten verfügbar sind. Dies kommt häufig vor, wenn eine Komponente zum Rendern eines Arrays von Elementen verwendet wird und wir die Darstellung der einzelnen Elemente anpassen möchten.

Um Eigenschaften der untergeordneten Komponente für den Slot-Inhalt verfügbar zu machen, müssen Sie eine Eigenschaft an slot binden. Empfangen und definieren Sie dann den Namen der Slot props am V-Slot.

Anwendungsbeispiel:

// 
<child-com> 
 <template v-slot:header="slotProps"> 
  Slot-Inhalt --{{ slotProps.item }} Seriennummer --{{ slotProps.index }} 
 </Vorlage> 
</child-com> 
     
//Unterkomponentencode <Vorlage> 
 <div v-for="(Element, Index) in arr" :Schlüssel="Index"> 
  <slot :item="item" name="header" :index="index"></slot> 
 </div> 
</Vorlage> 
<Skript-Setup> 
 const arr = ['1111', '2222', '3333'] 
</Skript> 

5. Dynamische Slot-Namen

v-slot -Direktivparameter kann auch dynamisch sein, um dynamische Slot-Namen zu definieren.

wie:

<child-com> 
 <Vorlage v-Steckplatz:[dd()]> 
  Dynamischer Slot-Name</template> 
</child-com> 
 
<Skript-Setup> 
const dd = () => { 
  returniere 'hre' 
} 

Zum Einsatz kommen hierbei Funktionen, es ist aber auch eine direkte Verwendung von Variablen möglich.

Dies ist das Ende dieses Artikels über die Zusammenfassung der Vue3-Slot-Nutzung. Weitere relevante Inhalte zur Vue3-Slot-Nutzung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!