Detaillierte Erläuterung der Verwendung der neuen integrierten Komponenten von Vue
1. TeleportOffizielle Teleport-Dokumentation 1.1 Einführung in Teleport1. Vue ermutigt uns, unsere Benutzeroberfläche zu erstellen, indem wir die Benutzeroberfläche und zugehörige Verhaltensweisen in Komponenten kapseln. Wir können sie ineinander verschachteln, um den Baum zu erstellen, aus dem die Benutzeroberfläche unserer Anwendung besteht. 2. Manchmal gehört ein Teil einer Komponentenvorlage jedoch logisch zu dieser Komponente, und aus technischer Sicht ist es besser, diesen Teil der Vorlage an eine andere Stelle im DOM zu verschieben, d. h. außerhalb der Vue-Anwendung. Sieht das Obige verwirrend aus? Es handelt sich tatsächlich um eine Übersetzung aus dem offiziellen Dokument.
1.2 Teleport verwenden1. Wir implementieren hier auch eine globale Modalbox 2. Verwenden Sie die Teleport-Montagefunktion über den Kommunikationsmechanismus für übergeordnete und untergeordnete Komponenten
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<link rel="Symbol" href="/favicon.ico" />
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
<title>Vite-App</title>
</Kopf>
<Text>
<div id="app"></div>
<div id="modal"></div> <!-- Definieren Sie ein Tag-Modal auf derselben Ebene wie die App -->
<script Typ="Modul" src="/src/main.ts"></script>
</body>
</html>
Definieren Sie eine Modalkomponente
<Vorlage>
<!-- teleport hat ein to-Attribut, das an das Tag mit der ID modal angehängt wird -->
<teleportieren nach="#modal">
<div id="center" v-if="istOffen">
<div Klasse="modal-header" v-if="Titel">
<h2>{{ Titel }}</h2>
<hr />
</div>
<div Klasse="modaler Inhalt">
<!-- Wir verwenden Slots, um das Einfügen externer Inhalte zu unterstützen-->
<Steckplatz></Steckplatz>
</div>
<button @click="buttonClick">Schließen</button>
</div>
</teleportieren>
</Vorlage>
<script lang="ts">
// defineProps<{ msg: string }>() Vue3-Setup definiert Props
importiere { defineComponent } von „vue“;
exportiere StandarddefiniereKomponente({
Requisiten: {
isOpen: Boolesch,
Titel: Zeichenfolge
},
// Emission überprüfen: {
'modal schließen': null
// (Nutzlast: beliebig) => {
// Nutzlasttyp zurückgeben === 'schließen'
// }
},
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;
Hintergrundfarbe: weiß;
Position: fest;
links: 50%;
oben: 50 %;
transformieren: übersetzen(-50 %, -50 %);
}
</Stil>
3. Verwenden Sie die Modalkomponente
<script setup lang="ts">
importiere { ref } von 'vue';
importiere Modal aus „./components/Modal.vue“;
const modalTitle = ref('Hallo Welt');
const modalIsOpen = ref(false);
const openModal = () => {
modalIsOpen.value = true;
}
const onModalClose = () => {
modalIsOpen.value = falsch;
}
</Skript>
<Vorlage>
<img alt="Vue-Logo" src="./assets/logo.png" />
<div Klasse="test-useURLLoader">
<button @click="openModal">modal</button>
<Modal :title="modalTitel" :isOpen="modalIsOpen" @close-modal="beiModalSchließen">
Mein Modell
</Modal>
</div>
</Vorlage>
<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>
1.3 Vorschaueffekt
2. SpannungOffizielle Suspense-Dokumentation
2.1 Einführung in die SpannungEs kann für asynchrone Daten verwendet werden. Es verfügt über eine lokale Verarbeitungsmethode, die sich an verschiedene Situationen anpasst, und bietet zwei Auswahlmöglichkeiten (Slots für Ladeabschluss und -fehler). Für detailliertere Informationen können Sie die offiziellen Dokumente selbst lesen. Ich habe nur einige davon ausgewählt. 2.2 Verwendung von Spannung1. Um asynchrone Effekte zu erzielen, können wir Promise verwenden, um asynchrone Operationen zu implementieren. 2. Wir definieren die folgende Komponente
<Vorlage>
<!-- 3 Sekunden warten, bis die Daten angezeigt werden-->
<h1>{{ Ergebnis }}</h1>
</Vorlage>
<script lang="ts">
importiere { defineComponent } von „vue“;
exportiere StandarddefiniereKomponente({
aufstellen() {
returniere neues Promise((auflösen) => {
setzeTimeout(() => {
Rückgabewert ({
Ergebnis: 43
})
}, 3000);
});
}
});
</Skript>
<Stil>
</Stil>
3. Verwenden Sie diese Komponente in App.vue
<script setup lang="ts">
importiere AsyncShow aus „./components/AsyncShow.vue“;
</Skript>
<Vorlage>
<img alt="Vue-Logo" src="./assets/logo.png" />
<div Klasse="test-useURLLoader">
<!-- Wenn das Versprechen nicht erfüllt ist, wird „Loding“ angezeigt. Nachdem das Versprechen erfüllt ist, wird der Wert angezeigt -->
<Spannung>
<Vorlage #Standard>
<AsyncShow />
</Vorlage>
<Vorlage #fallback>
<h2>
Laden...
</h2>
</Vorlage>
</Spannung>
</div>
</Vorlage>
<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>
2.3 Vorschaueffekt
ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können! Das könnte Sie auch interessieren:
|
<<: Reines CSS, um einen automatischen Rotationseffekt des Karussellbanners zu erzielen
Artikel empfehlen
Tutorial zum Anmelden bei MySQL nach der Installation von Mysql 5.7.17
Die Installation von mysql-5.7.17 wird weiter unt...
Beispielanalyse der Listen-Direktive in Nginx
Handlungsüberblick Im vorherigen Artikel haben wi...
Detaillierte Erläuterung der Konfigurationsmethode der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation
1. Beschreibung Früher haben wir über die Install...
Detaillierter Ablauf des Zabbix-Überwachungsprozesses und des Port-Through-Agenten
Umgebungseinführung Betriebssystem: Centos 7.4 Za...
Vollbild-Drag-Upload-Komponente basierend auf Vue3
In diesem Artikel wird hauptsächlich die Vollbild...
10 Leistungskonfigurationselemente, die nach der Installation von MySQL angepasst werden müssen
In diesem Blog besprechen wir zehn Leistungseinst...
Zusammenfassung und ausführliche Erläuterung der Docker-Container-Bedienungsanleitung
1. Erstellen und Ausführen eines Containers docke...
Detaillierte Erklärung von Javascript-Closures und -Anwendungen
Inhaltsverzeichnis Vorwort 1. Was ist ein Abschlu...
So implementieren Sie geplante MySQL-Aufgaben zur Datensicherung unter Linux
Vorwort Backup ist die Grundlage der Notfallwiede...
Detaillierte Schritte zur Installation von Harbor, einem privaten Docker-Repository
Die Installation von Harbor ist ziemlich einfach,...
Erste Schritte mit Mysql - SQL-Ausführungsprozess
Inhaltsverzeichnis 1. Prozess 2. Kernarchitektur ...
Implementierung der CentOS8.0-Netzwerkkonfiguration
1. Unterschiede in der Netzwerkkonfiguration zwis...
Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen
Zunächst die Struktur innerhalb des Nginx-Contain...
MySQL lernen, Datenbanken und Tabellen-DDL zu erstellen und zu bedienen für Anfänger
Inhaltsverzeichnis 1. Betrieb der Datenbank 1.1 E...
JavaScript zum Anzeigen und Ausblenden von Bildern
JavaScript zeigt und verbirgt Bilder. Zu Ihrer In...