Co jsou teleporta ve Vue?

Teleport v Vue 3 je způsob, jak vykreslit obsah komponenty na jiném místě v stromu DOM, aniž by byl vázán na skutečné umístění komponenty v hierarchii.

To je užitečné pro:

Modální okna a vyskakovací okna: Umožňuje snadno přesunout modální okno nebo vyskakovací oznámení do kořenových prvků <body> nebo <html>, čímž se vyhnete problémům s z-index a oříznutím rodičovskými prvky.
Znovu použitelné komponenty: Umožňuje vytvářet komponenty, které mohou vykreslovat část svého obsahu na různých místech, přičemž si zachovávají logiku v jednom komponentu.

Syntaxe použití <Teleport>:

<template>
  <div>
    <!-- Hlavní obsah komponenty -->
    <button @click="showModal = true">Otevřít modální okno</button>

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

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

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

<style scoped>
/* Styly pro komponentu */
</style>

Atribut to určuje cílový kontejner v DOM, kam bude obsah <Teleport> přesunut. Cílem může být:

Řetězec CSS selektoru (například #modal-target, .container).
Element DOM (získaný pomocí document.getElementById() nebo document.querySelector()).

Pokud cílový kontejner není nalezen, obsah nebude zobrazen.

Příklad struktury HTML:

<body>
  <div id="app">
    <!-- Zde bude renderována Vue aplikace -->
  </div>

  <!-- Cílový kontejner pro teleport -->
  <div id="modal-target"></div>
</body>

Stav komponenty (showModal) a jeho logika zůstávají spojeny s komponentou, i když jeho část je renderována na jiném místě. To činí teleporty mocným nástrojem pro správu složitých uživatelských rozhraní s plovoucími prvky.