Slot-Anordnung und Nutzungsanalyse in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Version Vue 2.9.6, DELL G3-Computer.

Es gibt drei Haupttypen von Slots in Vue:

Standard-Slots, benannte Slots, Slots mit begrenztem Bereich

Der Slot in Vue bezieht sich auf einen Platzhalter in einer untergeordneten Komponente, der der übergeordneten Komponente zur Verfügung gestellt wird.
Wie durch das Tag angegeben, kann die übergeordnete Komponente diesen Platzhalter mit beliebigem Vorlagencode (z. B. HTML, Komponenten usw.) füllen. Der gefüllte Inhalt ersetzt dann das Tag der untergeordneten Komponente (ersetzt den Platzhalter).

Standardsteckplätze

Der Standardsteckplatz ist der einfachste Steckplatztyp. Er entspricht der obigen Beschreibung, nämlich den Inhalt der untergeordneten Komponente in der übergeordneten Komponente durch Ersetzen des Platzhalters zu ändern.

Grammatik:

Platzieren Sie einen Platzhalter in der untergeordneten Komponente:

<Vorlage>
    <span>
        <span>Sascha nimmt ab</span>
        <Steckplatz></Steckplatz>
    </span>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name: "chassList"
}
</Skript>

Referenzieren Sie dann diese untergeordnete Komponente in der übergeordneten Komponente und füllen Sie den Platzhalter mit Inhalt:

<Vorlage>
    <div>
        <span>Was gibt es heute zu essen:</span>
        <chassList>
            <span>Schwägerin lässt Sascha nicht essen</span>
        </chassList>
    </div>
</Vorlage>

Zu diesem Zeitpunkt lautet der auf der Seite angezeigte Inhalt: [Was soll ich heute essen: Sascha macht eine Diät und ihre Schwägerin lässt sie nicht essen].

Benannte Slots

Beispielsweise gibt es in der untergeordneten Komponente zwei Stellen (zwei Slots), an denen die Platzhalter ersetzt werden müssen. Wenn die übergeordnete Komponente zu diesem Zeitpunkt den entsprechenden Inhalt in die entsprechenden Slots einfügen möchte, kann der Standardslot nicht bestimmen, in welchen Slot der entsprechende Inhalt eingefügt werden soll. Um mit solchen Szenarien umzugehen, wurden benannte Slots geschaffen.

Ein benannter Slot dient eigentlich dazu, dem Slot in der untergeordneten Komponente einen Namen zu geben, und die übergeordnete Komponente kann beim Verweisen auf die untergeordnete Komponente den Slot anhand des Namens abgleichen und den entsprechenden Inhalt in den entsprechenden Slot einfügen.

Grammatik:

Platzieren Sie zwei benannte Slots in der untergeordneten Komponente:

<Vorlage>
    <div>
        <span>Erster Slot</span>
        <slot name="eins"></slot>
        <span>Zweiter Steckplatz</span>
        <slot name="zwei"></slot>
    </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name: "chassList"
}
</Skript>

Verweisen Sie in der übergeordneten Komponente auf die untergeordnete Komponente und füllen Sie den entsprechenden Inhalt über v-slot:[Name] in den entsprechenden Slot ein:

<Vorlage>
    <div>
        <span>Zwei Steckplätze:</span>
        <chassList>
            <Vorlage v-slot:one>
                eins,
            </Vorlage>
            <Vorlage v-slot:zwei>
                <span>zwei</span>
            </Vorlage>
        </chassList>
    </div>
</Vorlage>

Zu diesem Zeitpunkt wird auf der Seite [zwei Slots angezeigt: der erste Slot eins, der zweite Slot zwei].

Hinweise zur Verwendung von Standard- und benannten Slots

1. Wenn in einer untergeordneten Komponente mehrere Standard-Slots vorhanden sind, wird der gesamte Füllinhalt (nicht angegebene benannte Slots), der den Standard-Slots in der übergeordneten Komponente zugewiesen ist, in jeden Standard-Slot der untergeordneten Komponente gefüllt.

2. Auch wenn die Füllreihenfolge der benannten Slots in der übergeordneten Komponente gestört ist, kann der gefüllte Inhalt, solange die Namen der benannten Slots übereinstimmen, korrekt in die entsprechenden benannten Slots gerendert werden (eine Karotte für eine Grube).

3. Wenn in einer untergeordneten Komponente sowohl Standard-Slots als auch benannte Slots vorhanden sind, der in der übergeordneten Komponente angegebene benannte Slot jedoch nicht in der untergeordneten Komponente gefunden werden kann, wird der Inhalt direkt verworfen, anstatt in den Standard-Slot eingefügt zu werden.

Slots mit begrenztem Umfang

Im Vergleich zu den oben erwähnten Standard-Slots und benannten Slots sind Scoped Slots schwieriger zu verstehen und zu verwenden.

• Die ersten beiden Schlitze betonen die Position des Füllers.
• Der Bereichsslot betont den [Umfang] der Datenaktion.
• Ein Scoped Slot ist ein Slot mit Parametern (Daten).

Bringen Sie Parameter (Daten) in den Slot der untergeordneten Komponente zur Verwendung durch die übergeordnete Komponente. Der Parameter (Daten) ist nur im Slot gültig. Die übergeordnete Komponente kann den angezeigten Inhalt basierend auf dem von der untergeordneten Komponente übergebenen Slot-Parameter (Daten) anpassen.

Grammatik:

Fügen Sie in die untergeordnete Komponente einen Slot mit Parametern (Daten) ein:

<Vorlage>
    <div>
        <span>Der Parameterwert im Slot ist</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name: "Klassenliste",
    Daten() {
        zurückkehren {
            istErlaubt: {
                eins: 'eins',
                zwei: 'zwei'
            }　
         }
    }
}
</Skript>

Verweisen Sie in der übergeordneten Komponente auf die untergeordnete Komponente und verwenden Sie den Slot-Bereich, um die vom Slot der untergeordneten Komponente übergebenen Parameter zu akzeptieren und die Daten zu verwenden.

<Vorlage>
    <div>
        <span>Bereichsbezogene Slots:</span>
        <Klassenliste>
            <template slot-scope="istAlleswo">
                {{ istAllwo.isAllwo.one}}
            </Vorlage>
        </Klassenliste>
    </div>
</Vorlage>

Zu diesem Zeitpunkt lautet der auf der Seite angezeigte Inhalt [Bereichsslot: Der Parameterwert im Slot ist eins].

Da {{}} in Vorlagen Ausdrücke unterstützt, können Sie den Seiteninhalt mithilfe der verschiedenen von den Unterkomponenten übergebenen Parameterwerte anpassen.

<Vorlage>
    <div>
        <span>Bereichsbezogene Slots:</span>
        <Klassenliste>
            <template slot-scope="istAlleswo">
                {{ isAllwo.isAllwo.one|| 'leerer Wert' }}
            </Vorlage>
        </Klassenliste>
    </div>
</Vorlage>

Wenn zu diesem Zeitpunkt der von der untergeordneten Komponente übergebene Parameter ein Nullwert ist, lautet der angezeigte Inhalt der Seite [Bereichsslot: Der Parameterwert im Slot ist null].

Scoped Slots haben verschiedene Verwendungsszenarien und werden in verschiedenen Frameworks häufig verwendet. Beispielsweise ist das Anpassen des Anzeigeinhalts einer Zeile oder Spalte in einer Tabelle in ElementUI ein typisches Anwendungsszenario für Scoped Slots.

Dies ist das Ende dieses Artikels über die Organisation und Nutzungsanalyse von Slots in Vue. Weitere Informationen zu den verschiedenen Arten von Slots in Vue 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!