Was sind Teleports in Vue?

Teleport in Vue 3 ist eine Möglichkeit, den Inhalt einer Komponente an einen anderen Ort im DOM-Baum zu rendern, ohne an die tatsächliche Position der Komponente in der Hierarchie gebunden zu sein.

Dies ist nützlich für:

Modale Fenster und Pop-ups: Ermöglichen es, ein modales Fenster oder eine Pop-up-Benachrichtigung leicht in die Wurzelelemente <body> oder <html> zu verschieben, um Probleme mit z-index und Abschneidung durch Elternelemente zu vermeiden.
Wiederverwendbare Komponenten: Ermöglichen die Erstellung von Komponenten, die einen Teil ihres Inhalts an verschiedenen Stellen rendern können, während ihre Logik in einer einzigen Komponente bleibt.

Verwendungssyntax von <Teleport>:

<template>
  <div>
    <!-- Hauptinhalt der Komponente -->
    <button @click="showModal = true">Modales Fenster öffnen</button>

    <!-- Inhalt des modalen Fensters, das nach #modal-target teleportiert wird -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Überschrift des modalen Fensters</h2>
          <p>Text des modalen Fensters.</p>
          <button @click="showModal = false">Schließen</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showModal = ref(false);
</script>

<style scoped>
/* Stile für die Komponente */
</style>

Das Attribut to gibt den Zielcontainer im DOM an, in den der Inhalt von <Teleport> verschoben wird. Das Ziel kann sein:

Ein CSS-Selektor-String (z.B. #modal-target, .container).
Ein DOM-Element (erhalten durch document.getElementById() oder document.querySelector()).

Wenn der Zielcontainer nicht gefunden wird, wird der Inhalt nicht angezeigt.

Beispiel für eine HTML-Struktur:

<body>
  <div id="app">
    <!-- Hier wird die Vue-Anwendung gerendert -->
  </div>

  <!-- Zielcontainer für das Teleport -->
  <div id="modal-target"></div>
</body>

Der Zustand des Components (showModal im obigen Beispiel) und seine Logik bleiben mit dem Component verbunden, auch wenn ein Teil davon an einem anderen Ort gerendert wird. Das macht Teleports zu einem mächtigen Werkzeug für die Verwaltung komplexer Benutzeroberflächen mit schwebenden Elementen.