Detaillierte Erläuterung der Verwendung der neuen integrierten Komponenten von Vue

Detaillierte Erläuterung der Verwendung der neuen integrierten Komponenten von Vue

1. Teleport

Offizielle Teleport-Dokumentation

1.1 Einführung in Teleport

1. 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.

Tatsächlich verstehe ich Teleport so, dass eine Komponente außerhalb der Vue-App bereitgestellt wird. Wie wir wissen, ist Vue eine SPA-Anwendung (Single Page). Das gesamte Rendering erfolgt im Tag mit der ID „app“. In diesem Fall erstellen wir eine Komponente auf derselben Ebene wie „app“ und verweisen über den Teleport-Tag darauf, sodass sie auf jeder Seite verwendet werden kann.

1.2 Teleport verwenden

1. 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

Bitte fügen Sie eine Beschreibung des Bildes hinzu

2. Spannung

Offizielle Suspense-Dokumentation

Waring : Da es sich um eine experimentelle Funktion in Vue3 handelt, kann sie jederzeit geändert werden. Daher wird die Verwendung in Produktionsumgebungen nicht empfohlen.

2.1 Einführung in die Spannung

Es 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 Spannung

1. Um asynchrone Effekte zu erzielen, können wir Promise verwenden, um asynchrone Operationen zu implementieren.

2. Wir definieren die folgende Komponente AsyncShow.vue 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

Bitte fügen Sie eine Beschreibung des Bildes hinzu

Zusammenfassen

Dieser 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:
  • Zwei Möglichkeiten zum dynamischen Erstellen von Komponenten in Vue
  • Zusammenfassung der drei Möglichkeiten zum Erstellen von Vue-Komponenten
  • Detaillierte Erklärung zum Erstellen und Veröffentlichen einer Vue-Komponente
  • So erstellen und übergeben Sie Werte in Vue-Komponenten
  • Ein Artikel, der Ihnen zeigt, wie Sie Vue-Komponenten erstellen und verwenden

<<:  Reines CSS, um einen automatischen Rotationseffekt des Karussellbanners zu erzielen

>>:  Eine kurze Erläuterung der richtigen Vorgehensweise bei der Wiederherstellung von MySQL-Tabellenbereichen

Artikel empfehlen

Detaillierte Erläuterung des verschachtelten Routings im Vue-Router

Inhaltsverzeichnis Schritt 1. Konfigurieren Sie R...

MYSQL METADATA LOCK (MDL LOCK) MDL-Sperrproblemanalyse

1. Einleitung MDL-Sperren in MySQL haben schon im...

So entfernen Sie die Kopfzeile aus der Elementtabelle

Dokumenthinweise mit dem Attribut show-header <...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27

Detailliertes Download-, Installations- und Konfi...

Mobiles Internet-Zeitalter: Responsive Webdesign ist zum allgemeinen Trend geworden

Wir befinden uns in einer Ära der rasanten Entwick...

Der Kernprozess der NodeJS-Verarbeitung einer TCP-Verbindung

Vor ein paar Tagen habe ich mit einem Freund etwa...

5 einfache XHTML-Webformulare für Webdesign

Einfaches XHTML-Webformular im Webdesign 5. Techn...

WeChat-Miniprogramme ermöglichen nahtloses Scrollen

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung der Nginx-Statusüberwachung und Protokollanalyse

1. Nginx-Statusüberwachung Nginx bietet eine inte...

Führen Sie die Schritte zum Aktivieren der GZIP-Komprimierung in Nginx aus.

Inhaltsverzeichnis Vorwort 1. Konfigurieren Sie d...

MySQL-Datenbankoptimierung: Indeximplementierungsprinzip und Nutzungsanalyse

Dieser Artikel veranschaulicht anhand von Beispie...