Eine kurze Erläuterung zur Verwendung von Slots in Vue

Eine kurze Erläuterung zur Verwendung von Slots in Vue

Definition und Verwendung:

Verwenden Sie die Slot-Tag-Definition in der Vorlage der Komponente. Der Standardanzeigewert kann in der Mitte des Slot-Tags definiert werden. Wenn das Slot-Tag keinen Namensattributwert deklariert, wird dieser bei Verwendung des Slots standardmäßig vom ersten Slot abwärts platziert. Zur Vereinfachung der Verwendung wird für den Slot im Allgemeinen ein Namensattributwert angegeben. Wenn Sie den Slot verwenden möchten, müssen Sie dem Tag, den Sie verwenden möchten, nur slot='slot name' hinzufügen und können den angegebenen Tag in den angegebenen Slot einfügen. Der Slot kann beliebiger Inhalt sein.

Beispiel:

<!DOCTYPE html>

<html lang="de">

<Kopf>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-kompatibel" content="IE=edge">

    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">

    <title>Spielautomaten-Übung</title>

    <script src="../../js/vue.js"></script>

</Kopf>

<Text>

    <div id="app">

        <div style="border: 7px solid blueviolet;">

            <h2>Übergeordnete Komponente</h2>

            <cpn>

                <!-- Fügt ein Element an der angegebenen Slot-Position hinzu -->

                <button slot="left">Schaltfläche</button>

                <input type="text" slot="right" placeholder="Dies ist ein Eingabefeld..."></input>

            </cpn>

        </div>

    </div>

    <template lang="" id="cpn">

        <div style="border: 6px durchgezogenes Grün;">

            <h2>Unterkomponenten</h2>

            <!-- Definieren Sie drei Slots in der Unterkomponente, und die Werte in den Slots sind Standardwerte-->

            <slot name="left">Links</slot>

            <slot name="mediate">Mittel</slot>

            <slot name="right">Rechts</slot>

        </div>

    </Vorlage>

    <Skript>

        neuer Vue({

            el:'#app',

            Komponenten: {

                cpn:{

                    Vorlage:'#cpn',

                }

            }

        })

    </Skript>

</body>

</html>

Der Effekt ist wie unten dargestellt:

analysieren:

Im obigen Beispiel werden in der untergeordneten Komponente drei Slots definiert und ihnen werden spezifische Namensattributwerte zugewiesen. Wenn die übergeordnete Komponente die untergeordnete Komponente aufruft, wird in dem Slot mit dem Namen „links“ in der untergeordneten Komponente eine Schaltfläche und in dem Slot mit dem Namen „rechts“ ein Eingabefeld platziert. Daraus können wir ersehen, dass Komponenten durch die Verwendung von Slots mehr Erweiterungen haben können. Der Inhalt des Slots kann alles sein. Das Definieren eines Slots ist gleichbedeutend damit, im Voraus ein Loch für die Komponente zu graben und es dann aufzurufen, wenn es später verwendet wird.


Dies ist das Ende dieses Artikels über die Verwendung von Slots in Vue. Weitere Informationen zur Verwendung 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!

Das könnte Sie auch interessieren:
  • Details zum Vue-Scope-Steckplatz, Steckplatz, V-Steckplatz, Steckplatz-Scope
  • Informationen zum Slot-Verteilungsinhalt von Vue (mehrere Verteilungen)
  • Grundlegende Nutzungsspezifikationen von Slots in Vue2
  • Detaillierte Erklärung des Vue-Slots
  • Detaillierte Erklärung zur Verwendung von Slots in Vue

<<:  Lösung für das Problem des Speicherns des Formats in HTML TextArea

>>:  Verwenden der Outline-Offset-Eigenschaft in CSS zum Implementieren eines Pluszeichens

Artikel empfehlen

Datums- und Zeitkomponente des WeChat-Applets (Jahr, Monat, Tag, Stunde und Minute)

In diesem Artikelbeispiel wird der spezifische Co...

So implementieren Sie CSS, um Auslassungspunkte anzuzeigen, wenn einzeiliger oder mehrzeiliger Text überläuft

1. Einreihiger Überlauf 1. Wenn eine einzelne Zei...

Lösungsbeispiel und Erklärung für Fehler beim Importieren und Exportieren von Daten in MySQL-Datenbanken

Daten exportieren Einen Fehler melden VARIABLEN W...

Gründe, warum MySQL-Abfragen langsam sind

Inhaltsverzeichnis 1. Wo ist die Langsamkeit? 2. ...

Linux-Installation Redis-Implementierungsprozess und Fehlerlösung

Ich habe heute Redis installiert und es sind eini...

HTML-Code für feste Titelspalte und spezifische Implementierungscode für die Titelkopftabelle

Code kopieren Der Code lautet wie folgt: <!DOC...

Details zu Linux-Dateideskriptoren, Dateizeigern und Inodes

Inhaltsverzeichnis Linux - Dateideskriptor, Datei...

CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10

Während Ubuntu heute das beliebteste Linux-Betrie...

Beispielcode zum Hervorheben von Suchbegriffen im WeChat-Miniprogramm

1. Einleitung Wenn Sie im Projekt auf eine Anford...

Analyse und Lösung eines Fehlalarmproblems bei der langsamen MySQL-Protokollüberwachung

Früher wurden manche Alarme aus verschiedenen Grü...

Mehrere gängige Methoden zum Übergeben zusätzlicher Parameter beim Senden eines Formulars

Beim Absenden eines Formulars kann es vorkommen, d...

So fragen Sie dieselbe Tabelle in einer MySQL-Datenbank gleichzeitig ab und aktualisieren sie

In gewöhnlichen Projekten stoße ich häufig auf di...

Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen

AWS – Amazons Cloud-Computing-Serviceplattform Ic...

So installieren und deinstallieren Sie open-vswitch unter Linux

1. Kompilieren und installieren Sie OVS aus dem Q...

Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt

Methode 1: Bitte fügen Sie den folgenden Code nach...