Ce sunt teleporterii în Vue?

Teleport în Vue 3 este o modalitate de a reda conținutul unui component într-un alt loc din arborele DOM, fără a fi legat de locația fizică a componentului în ierarhie.

Acest lucru este util pentru:

Ferestre modale și pop-up-uri: Permite mutarea ușoară a unei ferestre modale sau a unei notificări pop-up în elementele rădăcină <body> sau <html>, evitând problemele cu z-index și tăierea de către elementele părinte.
Componente reutilizabile: Permite crearea de componente care pot reda o parte din conținutul lor în diferite locuri, păstrând logica în același component.

Sintaxa de utilizare a <Teleport>:

<template>
  <div>
    <!-- Conținutul principal al componentului -->
    <button @click="showModal = true">Deschide modal</button>

    <!-- Conținutul ferestrei modale, teleportat în #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Titlul ferestrei modale</h2>
          <p>Textul ferestrei modale.</p>
          <button @click="showModal = false">Închide</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Stiluri pentru componentă */
</style>

Atributul to indică containerul țintă în DOM, către care va fi mutat conținutul <Teleport>. Ținta poate fi:

Un șir de selector CSS (de exemplu, #modal-target, .container).
Un element DOM (obținut prin document.getElementById() sau document.querySelector()).

Dacă containerul țintă nu este găsit, conținutul nu va fi afișat.

Exemplu de structură HTML:

<body>
  <div id="app">
    <!-- Aici va fi redată aplicația Vue -->
  </div>

  <!-- Container țintă pentru teleport -->
  <div id="modal-target"></div>
</body>

Starea componentului (showModal) și logica sa rămân legate de component, chiar dacă o parte a acesteia este redată în alt loc. Acest lucru face ca teleporturile să fie un instrument puternic pentru gestionarea interfețelor complexe cu elemente flotante.