Schneller Einstieg in die Teleport-Komponenten und Verwendungssyntax von VUE 3

1. Einführung in das Teleportieren

Die Teleport-Komponente bietet eine präzise Möglichkeit, das übergeordnete Element des darin enthaltenen Inhalts anzugeben. Einfach ausgedrückt können wir den Inhalt im Teleport in jedem DOM steuern, was einfach zu verwenden ist.

Verwenden Sie die Syntax:

<teleportieren zu="body">
    <div>
   Zu erstellender Inhalt</div>  
</teleportieren>

Das „to“-Attribut gibt das DOM-Element an, zu dem der Inhalt im Teleport hinzugefügt wird. Es kann sich um einen Tag-Namen, eine ID oder einen Klassennamen handeln.

//Tagname. Das obige Beispiel wird unter Verwendung des Tag-Namens zum Body-Element hinzugefügt.
<teleportieren zu="body"></teleport>

//Klassenname. Beispiel: to=".className"
<teleportieren nach=".className"></teleport>

//ID-Name <teleportieren nach="#idName"></teleport>

1.1. Mehrere Teleports verwenden

Mehrere Teleport-Portalkomponenten können ihren gesamten Inhalt an einem Ziel anhängen. Der Inhalt mehrerer Teleportkomponenten ist ein Geschwisterknoten, wobei der zuerst angehängte Knoten vorne und der später angehängte hinten ist.

Verwenden Sie es wie folgt:

<teleportieren zu="body">
    <div Klasse="Erste">
   Das erste Befestigungselement</div>  
</teleportieren>
<teleportieren zu="body">
    <div Klasse="zweite">
   Das zweite Befestigungselement</div>  
</teleportieren>

Die Laufergebnisse sind in der Abbildung dargestellt:

Das obige Beispiel entspricht:

<teleportieren zu="body">
 <div Klasse="Erste">
  Das erste Befestigungselement</div>
 <div Klasse="zweite">
  Das zweite Befestigungselement</div>
</teleportieren>

2. Warum Teleport verwenden?

Bei der Entwicklung mit Vue sind ständig mehrere Komponenten verschachtelt, was die Handhabung des Stils oder der Hierarchie der Elemente erschwert. Wenn wir beispielsweise ein modales oder Toast-Prompt-Feld hinzufügen müssen, ist es einfacher, Stil und Hierarchie festzulegen, wenn wir ein solches Feld von der Vue-Komponente trennen können.

Einige Studenten denken vielleicht, wäre es nicht besser, es direkt in index.html einzufügen? Darüber hinaus müssen die Modal- und Toast-Elemente den Statuswert der Vue-Komponente verwenden, um das Ausblenden und Anzeigen der Modal- und Toast-Elemente über den Status zu steuern. Wenn Sie es direkt in index.html einfügen, wird die Statussteuerung kompliziert.

Daher ist die Teleport-Komponente praktisch. Es ist ein bisschen wie die „Anywhere Door“ in „Doraemon“, die Elemente zu jedem beliebigen Element teleportieren kann. Sie können zur Steuerung auch den Statuswert in der Vue-Komponente verwenden.

3. Teleport-Anwendung

Ein mit vite + vue 3 erstelltes Projekt. Einzelheiten zum Erstellen eines Projekts finden Sie unter „Was, Sie verwenden immer noch webpack? Andere verwenden Vite zum Erstellen von Projekten" Artikel.

Nachdem das Vue 3-Projekt erstellt wurde, suchen Sie die Datei index.htm und fügen Sie Folgendes hinzu:

<div id="newModal"></div>    

Fügen Sie in der Komponentendatei die Teleport-Komponente hinzu:

<button @click="showModal" class="btn">Modal öffnen </button>
<!-- Das Attribut „to“ ist der Zielort-->
<teleportieren nach="#newModal">
 <div v-if="sichtbar">
  <div>Ich bin eine Modalbox</div>
  </div>
</teleportieren>

Aus den Laufergebnissen haben wir festgestellt, dass die verwendete Teleport-Komponente den Inhalt über das „to“-Attribut an <div></div> überträgt, das sich auf derselben Ebene wie <div></div> befindet. Derzeit wird das Ausblenden und Anzeigen von Elementen im Teleport vollständig durch den Statuswert in der Vue-Komponente bestimmt.

4. Fallstricke, denen Anfänger begegnen können

Einige Studenten führten die Teleport-Komponente direkt in ihre eigenen Projekte ein. Nach dem Ausführen stellten sie fest, dass die Komponente unverändert ausgegeben, aber nicht analysiert wurde und ein Fehler gemeldet wurde.

Die Fehlermeldung lautet:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unbekanntes benutzerdefiniertes Element: <teleport> – haben Sie die Komponente richtig registriert? Geben Sie bei rekursiven Komponenten unbedingt die Option „Name“ an.

Dann habe ich im Internet nach Lösungen gesucht, aber festgestellt, dass ich keine finden konnte!

Die Grundursache ist, dass Sie immer noch vue2 und nicht vue3 verwenden. Einige Studenten betrachten das durch das Scaffolding von Vue-CLI 3 erstellte Projekt als Vue3. Es besteht kein notwendiger Zusammenhang zwischen der Erstellung eines Projekts mit Vue-CLI 2 und Vue-CLI 3 und der Frage, ob es sich um Vue3 handelt.

Dies ist das Ende dieses Artikels über den schnellen Einstieg in die VUE 3-Teleport-Komponente. Weitere verwandte VUE 3-Teleport-Inhalte 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!