Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion

Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion

Die Verwendung der vue3 Teleport-Sofortbewegungsfunktion dient zu Ihrer Information. Der spezifische Inhalt ist wie folgt

Teleport wird normalerweise als sofortige Teleportationskomponente übersetzt, was eigentlich schwer zu verstehen ist. Ich verstehe es als „unabhängige Komponente“

Es kann die von Ihnen geschriebenen Komponenten in jedem gewünschten DOM mounten und ist daher sehr frei und unabhängig.

Nehmen wir ein Beispiel: Schreiben einer Popup-Komponente

<Vorlage>
<teleportieren nach="#modal">
 <div id="center" v-if="istOffen">
 <h2><slot>Dies ist ein Modal</slot></h2>
 <button @click="buttonClick">Schließen</button>
 </div>
</teleportieren>
</Vorlage>
<script lang="ts">

Standard exportieren {
 Requisiten: {
 isOpen: Boolesch,
 },
 gibt aus:
 'modal schließen': null
 },
 setup(Eigenschaften, Kontext) {
 const buttonClick = () => {
 Kontext.emit('modal schließen')
 }
 zurückkehren {
 buttonKlick
 }
 }
}
</Skript>
<Stil>
 #Mitte {
 Breite: 200px;
 Höhe: 200px;
 Rand: 2px tief schwarz;
 Hintergrund: weiß;
 Position: fest;
 links: 50%;
 oben: 50 %;
 Rand links: -100px;
 Rand oben: -100px;
 }
</Stil>

Bei Verwendung in app.vue ist es dasselbe wie der Aufruf einer normalen Komponente.

<Vorlage>
<div id="app">
 <img alt="Vue-Logo" src="./assets/logo.png">
 <HelloWorld msg="Willkommen bei Ihrer Vue.js-App"/>
 <HooksDemo></HooksDemo>
 <button @click="openModal">Modal öffnen</button><br/>
<modal :isOpen="modalIsOpen" @close-modal="onModalClose"> Mein Modal !!!!</modal>
</div>
 
</Vorlage>
<Skript>
importiere HelloWorld aus './components/HelloWorld.vue'
importiere HooksDemo aus './components/HooksDemo.vue'
Modal aus „./components/Modal.vue“ importieren
importiere{ref} von 'vue'
Standard exportieren {
 Name: "App",
 Komponenten:
 Hallo Welt,
 HakenDemo,
 Modal
 },
 aufstellen() {
 const modalIsOpen = ref(false)
 const openModal = () => {
 modalIsOpen.value = true
 }
 const onModalClose = () => {
 modalIsOpen.value = false
 }
 zurückkehren {
 modalIsOpen,
 offenModal,
 beiModalClose
 }
 }
}
</Skript>

<Stil>
#app {
 Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
 -webkit-font-smoothing: Kantenglättung;
 -moz-osx-font-smoothing: Graustufen;
 Textausrichtung: zentriert;
 Farbe: #2c3e50;
 Rand oben: 60px;
}
</Stil>

Bei Verwendung in der Datei app.vue befindet sich das Modal unter dem DOM-Knoten der App, und die DOM-Struktur und das CSS des übergeordneten Knotens wirken sich auf das Modal aus und verursachen somit Probleme

1. Modal ist in andere Komponenten eingebunden und kann leicht gestört werden
2. Die Stile sind auch in anderen Komponenten, was leicht sehr verwirrend werden kann

Teleport kann modale Komponenten in jedem externen DOM rendern, das Sie rendern möchten, ohne sie in #app verschachteln zu müssen, sodass sie sich nicht gegenseitig stören. Sie können sich Teleport als Portal vorstellen, mit dem Sie Ihre Komponenten an jeden beliebigen Ort übertragen können. Wenn Sie es verwenden, kann das to- Attribut den DOM-Knoten bestimmen, unter dem Sie es mounten möchten.

<Vorlage>
 <teleportieren nach="#modal">
 <div id="Mitte">
 <h2>besser</h2>
 </div>
 </teleportieren>
</Vorlage>

Fügen Sie in index.html unter dem öffentlichen Ordner einen Knoten hinzu

<!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">
 <link rel="Symbol" href="<%= BASE_URL %>favicon.ico" >
 <Titel><%= htmlWebpackPlugin.options.title %></Titel>
 </Kopf>
 <Text>
 <keinSkript>
 <strong>Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %> funktioniert nicht richtig, wenn JavaScript nicht aktiviert ist. Bitte aktivieren Sie es, um fortzufahren.</strong>
 </noscript>
 <div id="app"></div>
 <div id="modal"></div>
 <!-- erstellte Dateien werden automatisch eingefügt -->
 </body>
</html>

Auf diese Weise können Sie erkennen, dass die modale Komponente nicht unter der App gemountet ist und nicht mehr von der App-Komponente beeinflusst wird.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung von Teleport, einer integrierten Komponente von Vue3
  • Detaillierte Erklärung zur Verwendung von Teleport in Vue3
  • Detaillierte Erläuterung der Praxis und des Prinzips von Vue3 Teleport
  • So implementieren Sie den Teleport von vue3 in vue2

<<:  So installieren und verwenden Sie Server-U Version 14

>>:  mysql 5.7.18 winx64 Passwort ändern

Artikel empfehlen

Vue implementiert die Seiten-Caching-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

So richten Sie den Remotezugriff auf einen Server ein, indem Sie in Windows eine IP-Adresse angeben

Wir haben viele Server, die häufig von externen N...

Der Inhalt des häufig verwendeten Eingabetextfelds wird automatisch vertikal zentriert und der Standardeingabeaufforderungstext ist leer, wenn darauf geklickt wird

Drei Funktionen: 1. Automatische vertikale Zentrie...

Sammlung gemeinsamer DIV-Attribute

1. Immobilienliste Code kopieren Der Code lautet w...

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die vue3.0-Projektarchitektur erstellen

Inhaltsverzeichnis Vorwort: 1. Erstellen Sie ein ...

Welche Beziehung besteht zwischen Mapper-SQL-Anweisungsfeldern und Entitätsklassen-Attributnamen?

Hintergrund: 1. Es gibt eine Benachrichtigungstab...

Perfekte Lösung für den Themenwechsel basierend auf CSS-Variablen (empfohlen)

Als Baidu diese Anforderung erhielt, fand das Unt...

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Inhaltsverzeichnis Vorwort 1. Übersicht 2. Lese- ...

So überwachen Sie den Ausführungsstatus eines Docker-Container-Shell-Skripts

Szenario Das Unternehmensprojekt wird in Docker b...

Aktivierungsmethode für Windows Service 2016 Datacenter\Stand\Embedded (2021)

Führen Sie cmd mit Administratorrechten aus slmgr...

Fallstudie zu JavaScript Anti-Shake

Prinzip Das Prinzip von Anti-Shake ist: Du kannst...

Ein Beispiel zum Abfragen von Daten in MySQL und zum Aktualisieren dieser Daten in eine andere Tabelle basierend auf Bedingungen

Dieser Artikel beschreibt anhand eines Beispiels,...

Detaillierte Erläuterung zur Entwicklung von JavaScript-Webseiten auf Einstiegsniveau

Teil 3: ❤Drei Möglichkeiten, den Backend-Datenemp...

MySQL-Tabellenübergreifende Abfrage und Tabellenübergreifende Aktualisierung

Freunde, die über Grundkenntnisse in SQL verfügen...

Einführung in den vollständigen Namen und die Funktion von HTML-Tags

Alphabetisch DTD: Gibt an, in welcher XHTML 1.0 D...