Czym są teleporty w Vue?

Teleport w Vue 3 to sposób renderowania zawartości komponentu w innym miejscu drzewa DOM, niezależnie od faktycznego położenia komponentu w hierarchii.

Jest to przydatne do:

Okien modalnych i wyskakujących: Umożliwia łatwe przeniesienie okna modalnego lub powiadomienia do elementów głównych <body> lub <html>, unikając problemów z z-index i obcinaniem przez elementy nadrzędne.
Wielokrotnego użytku komponentów: Pozwala tworzyć komponenty, które mogą renderować część swojego zawartości w różnych miejscach, zachowując logikę w jednym komponencie.

Składnia użycia <Teleport>:

<template>
  <div>
    <!-- Główna zawartość komponentu -->
    <button @click="showModal = true">Otwórz modal</button>

    <!-- Zawartość modala, teleportowana do #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Tytuł modala</h2>
          <p>Tekst modala.</p>
          <button @click="showModal = false">Zamknij</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Style komponentu */
</style>

Atrybut to wskazuje docelowy kontener w DOM, do którego zostanie przeniesiona zawartość <Teleport>. Może to być:

Ciąg selektora CSS (np. #modal-target, .container).
Element DOM (uzyskany za pomocą document.getElementById() lub document.querySelector()).

Jeśli docelowy kontener nie zostanie znaleziony, zawartość nie będzie wyświetlana.

Przykład struktury HTML:

<body>
  <div id="app">
    <!-- Tu będzie renderowana aplikacja Vue -->
  </div>

  <!-- Docelowy kontener dla teleportu -->
  <div id="modal-target"></div>
</body>

Stan komponentu (showModal) i jego logika pozostają powiązane z komponentem, nawet jeśli jego część jest renderowana w innym miejscu. To czyni teleporty potężnym narzędziem do zarządzania złożonymi interfejsami użytkownika z elementami unoszącymi się.