Kas yra teleportai Vue?

Vue 3-iuose teleportai yra būdas pateikti komponento turinį į kitą DOM medžio vietą, nesusijusią su tikruoju komponento išsidėstymu hierarchijoje.

Tai naudinga:

Modaliniai langai ir iššokantys langai: leidžia lengvai perkelti modalinį langą arba iššokantį pranešimą į <body> arba <html> pagrindinius elementus, išvengiant z-index problemų ir tėvų elementų apkarpimo.
Pernaudojami komponentai: leidžia kurti komponentus, kurie gali rodyti savo turinio dalį skirtingose vietose, išlaikant savo logiką viename komponente.

<Teleport> naudojimo sintaksė:

<template>
  <div>
    <!-- Pagrindinis komponento turinys -->
    <button @click="showModal = true">Atidaryti modalinį langą</button>

    <!-- Modalinio lango turinys, teleportuojamas į #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Modalinio lango antraštė</h2>
          <p>Modalinio lango tekstas.</p>
          <button @click="showModal = false">Uždaryti</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Komponento stiliai */
</style>

to atributas nurodo tikslinį konteinerį DOM'e, į kurį bus perkelta <Teleport> turinys. Tikslas gali būti:

CSS selektoriaus eilutė (pvz., #modal-target, .container)
DOM elementas (gautas naudojant document.getElementById() arba document.querySelector())

Jei tikslinis konteineris nerandamas, turinys nebus rodomas.

HTML struktūros pavyzdys:

<body>
  <div id="app">
    <!-- Čia bus rodomas Vue programa -->
  </div>

  <!-- Teleport tikslinis konteineris -->
  <div id="modal-target"></div>
</body>

Komponento būsena (showModal) ir jos logika lieka susijusios su komponentu, net jei jos dalis yra rodomas kitur. Tai daro teleportus galingu įrankiu sudėtingiems naudotojo sąsajos elementams valdyti.