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: