Čo sú teleporty vo Vue?

Teleport v Vue 3 je spôsob, ako vykresliť obsah komponentu na inom mieste v strome DOM, bez závislosti od skutočného umiestnenia komponentu v hierarchii.

Toto je užitočné pre:

Modálne okná a vyskakovacie okná: Umožňuje ľahko presunúť modálne okno alebo vyskakovacie oznámenie do koreňových prvkov <body> alebo <html>, čím sa vyhnete problémom s z-index a orezaním rodičovskými prvkami.
Znovu použiteľné komponenty: Umožňuje vytvárať komponenty, ktoré môžu vykresliť časť svojho obsahu na rôznych miestach, pričom si zachovávajú svoju logiku v jednom komponente.

Syntax použitia <Teleport>:

<template>
  <div>
    <!-- Hlavný obsah komponentu -->
    <button @click="showModal = true">Otvoriť modálne okno</button>

    <!-- Obsah modálneho okna, teleportovaný do #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Nadpis modálneho okna</h2>
          <p>Text modálneho okna.</p>
          <button @click="showModal = false">Zatvoriť</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Štýly pre komponent */
</style>

Atribút to určuje cieľový kontajner v DOM, do ktorého bude obsah <Teleport> presunutý. Cieľ môže byť:

Reťazec CSS selektora (napríklad, #modal-target, .container).
DOM prvok (získaný pomocou document.getElementById() alebo document.querySelector()).

Ak cieľový kontajner nie je nájdený, obsah sa nezobrazí.

Príklad štruktúry HTML:

<body>
  <div id="app">
    <!-- Tu bude renderovaná Vue aplikácia -->
  </div>

  <!-- Cieľový kontajner pre teleport -->
  <div id="modal-target"></div>
</body>

Stav komponentu (showModal) a jeho logika zostávajú spojené s komponentom, aj keď jeho časť je renderovaná na inom mieste. To robí teleporty mocným nástrojom na správu zložitých používateľských rozhraní s plávajúcimi prvkami.