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 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:
|
<<: So installieren und verwenden Sie Server-U Version 14
>>: mysql 5.7.18 winx64 Passwort ändern
Artikel empfehlen
Detaillierte Erläuterung der Angular-Strukturdirektivenmodule und -Stile
Inhaltsverzeichnis 1. Strukturelle Anweisungen Mo...
So erstellen Sie SonarQube mit Docker
Inhaltsverzeichnis 1. Docker installieren 2. Sona...
Schreiben Sie mit CSS in drei Schritten einen Coupon für eine Shopping-Card
Heute ist der 618. und alle großen Einkaufszentre...
Detailanalyse der MySQL-Berechtigungskontrolle
Inhaltsverzeichnis 1. Globale Ebene 2. Datenbanke...
Warum wird UTF-8 in MySQL nicht empfohlen?
Ich bin kürzlich auf einen Fehler gestoßen, als i...
WiFi-Entwicklung | Einführung in die WiFi-Wireless-Technologie
Inhaltsverzeichnis Einführung in die WiFi-Wireles...
So legen Sie einen Alias für einen benutzerdefinierten Pfad in Vue fest
So konfigurieren Sie benutzerdefinierte Pfadalias...
Vue.js implementiert den Code zum Klicken auf das Symbol zum Vergrößern und Verlassen
Im vorherigen Artikel wurde vorgestellt, wie Vue ...
Einführung in das Hinzufügen neuer Benutzer zu MySql, das Erstellen von Datenbanken für Benutzer und das Zuweisen von Berechtigungen an Benutzer
1. Neuen Benutzer hinzufügen Nur lokalen IP-Zugri...
Einfache Implementierung von HTML zum Erstellen eines persönlichen Lebenslaufs
Lebenslauf-Code: XML/HTML-CodeInhalt in die Zwisc...
Beispielcode zur Implementierung von dynamischem Skinning mit vue+element
Manchmal kann das Thema eines Projekts nicht jede...
So stellen Sie ein SpringBoot-Projekt mit Docker bereit
Die Entwicklung der Docker-Technologie bietet ein...
Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her
1. Verwenden Sie Docker-Images, um alle Image-Dat...
Beispiele für korrekte Beurteilungsmethoden für Datentypen in JS
Inhaltsverzeichnis Vorwort Kann typeof den Typ ko...
Mybatis + mysql verwendet gespeicherte Prozeduren, um Implementierungscode für Seriennummern zu generieren
Verwenden Sie gespeicherte Prozeduren, um Transak...