Detaillierte Erklärung zur Verwendung von Teleport in Vue3

In diesem Artikel behandeln wir:

• Zweck des Teleports
• Teleport-Beispiel
• Einige interessante Code-Interaktionen
  

Zweck des Teleports

Zunächst einmal: wann und wie die Teleport-Funktion verwendet wird.

Wenn Sie größere Vue-Projekte entwickeln, sollten Sie Ihren Code in eine wiederverwendbare Logik organisieren. Beim Umgang mit bestimmten Komponententypen, z. B. Modale, Benachrichtigungen oder Tooltips, befindet sich die Logik der HTML-Vorlage möglicherweise nicht in derselben Datei wie das gewünschte gerenderte Element.

Tatsächlich ist es in den meisten Fällen viel einfacher, mit diesen Elementen umzugehen, als mit dem vollständig separaten DOM von Vue. Denn Dinge wie Position, Z-Index und Styling verschachtelter Komponenten können knifflig werden, da Sie den Umfang aller ihrer übergeordneten Elemente berücksichtigen müssen.

Hier kommt Teleport ins Spiel. Wir können Vorlagencode in die Komponente schreiben, in der sich die Logik befindet, da wir dann die Daten oder Eigenschaften der Komponente verwenden können.

Ohne Teleport müssen wir uns auch um die Ereignisausbreitung kümmern, um die Logik von untergeordneten Komponenten im DOM-Baum weiterzugeben.

So funktioniert Teleport

Angenommen, wir haben eine untergeordnete Komponente, in der wir ein Benachrichtigungs-Popup auslösen möchten. Wie gerade besprochen wäre es viel einfacher, wenn die Benachrichtigungen in einem vollständig separaten DOM-Baum und nicht im Stammelement #app von Vue gerendert würden.

Bearbeiten Sie zuerst index.html und fügen Sie vor </body> ein <div> hinzu.

//index.html
<Text>
   <div id="app"></div>
   <div id='portal-ziel'></div>
</body>

Erstellen Sie als Nächstes die Komponente, die die Renderbenachrichtigung auslöst.

//VuePortals.vue
<Vorlage>
  <div Klasse='Portale'>
    <button @click='showNotification'> Benachrichtigung auslösen! </button>
    <teleportieren zu='#portal-target'>
      <div Klasse='Benachrichtigung'>
        Dies erfolgt außerhalb dieser untergeordneten Komponente!
      </div>
    </teleportieren>
  </div>
</Vorlage>

<Skript>
importiere { ref } von 'vue'
Standard exportieren {
  aufstellen () {
    const isOpen = ref(false)

    var schließenPopup

    const showNotification = () => {
      isOpen.value = true

      Zeitüberschreitung löschen (Popup schließen)

      Popup schließen = Timeout festlegen(() => {
        isOpen.value = false
      }, 2000)
    }

    zurückkehren {
      istOffen,
      Benachrichtigung anzeigen
    }
  }
}
</Skript>

<Stilbereich>
  .Benachrichtigung {
    Schriftfamilie: Myriad-Pro, serifenlos;
    Position: fest;
    unten: 20px;
    links: 20px;
    Breite: 300px;
    Polsterung: 30px;
    Hintergrundfarbe: #fff;
  }
</Stil>

In diesem Codeausschnitt wird beim Drücken der Taste 2 Sekunden lang eine Benachrichtigung angezeigt. Unser Hauptziel besteht jedoch darin, Teleport zu verwenden, um Benachrichtigungen zu erhalten und außerhalb des VUE-Programms zu rendern.

Wie Sie sehen, hat Teleport ein erforderliches Attribut:

Das „to“-Attribut nimmt eine gültige DOM-Abfragezeichenfolge an. Diese kann wie folgt lauten:

• Die ID des Elements
• Die Klasse des Elements
• Datenauswahl
• Antwortabfragezeichenfolge
  

Da wir den Code in #portal-target übergeben haben, findet das Vue-Programm das #portal-target-Div, das wir in index.html eingefügt haben, übergibt den gesamten Code im Portal und rendert ihn in diesem Div.

Hier sind die Ergebnisse:

Durch die Untersuchung des Elements und den Blick auf den DOM erhält man eine ziemlich klare Vorstellung davon, was vor sich geht.

Wir können die gesamte Logik der VuePortals-Komponente verwenden, müssen unserem Projekt jedoch mitteilen, welcher Vorlagencode woanders gerendert werden soll.

Oben finden Sie eine ausführliche Erläuterung zu Teleport in Vue3. Weitere Informationen zu Teleport in Vue3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!