Mi a teleport Vue-ban?

A Vue 3-ban a <Teleport> egy módja annak, hogy egy komponens tartalmát egy másik helyre rendereljük a DOM-fán belül, anélkül, hogy a komponens tényleges helyétől függne.

Ez hasznos például:

Modális ablakok és felugró ablakok: Lehetővé teszi, hogy könnyen áthelyezzük a modális ablakot vagy felugró értesítést a <body> vagy <html> gyökérelemhez, elkerülve a z-index problémákat és a szülő elemek által okozott levágást.
Újrahasznosítható komponensek: Olyan komponensek létrehozását teszi lehetővé, amelyek a tartalmuk egy részét különböző helyeken tudják renderelni, miközben a logikájuk egy komponensben marad.

A <Teleport> használati szintaxisa:

<template>
  <div>
    <!-- A komponens fő tartalma -->
    <button @click="showModal = true">Modális ablak nyitása</button>

    <!-- A modális tartalom, ami a #modal-target-be teleportálódik -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Modális ablak címe</h2>
          <p>Modális ablak szövege.</p>
          <button @click="showModal = false">Bezárás</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* A komponens stílusai */
</style>

A to attribútum megadja a DOM-ban a célkonténert, ahová a <Teleport> tartalma kerül. A cél lehet:

Egy CSS-szűrő sztring (pl. #modal-target, .container).
Egy DOM elem (amelyet a document.getElementById() vagy document.querySelector() segítségével szerezhetünk be).

Ha a célkonténer nem található, a tartalom nem jelenik meg.

HTML szerkezet például:

<body>
  <div id="app">
    <!-- Itt fog megjelenni a Vue alkalmazás -->
  </div>

  <!-- A teleport célkonténere -->
  <div id="modal-target"></div>
</body>

A komponens állapota (showModal) és logikája a komponenshez kötött marad, még akkor is, ha annak egy része más helyen renderelődik. Ez a teleportokat erőteljes eszközzé teszi a bonyolult felhasználói felületek kezelése során.