Mis on teleportid Vue-s

Vue 3-s teleportid on viis renderdada komponendi sisu teise DOM-i kohta, mis ei ole seotud komponendi tegeliku asukohaga hierarhias.

See on kasulik:

Modaal- ja hüpikaknad: võimaldavad hõlpsasti viia modaal- või hüpikteate <body> või <html> juurelementidesse, vältides z-index probleeme ja vanemate elementide kärpimist.
Taaskasutatavad komponendid: võimaldavad luua komponente, mis võivad kuvada oma sisu osasid erinevates kohtades, säilitades samal ajal oma loogika ühes komponendis.

<Teleport> kasutamise süntaks:

<template>
  <div>
    <!-- Komponendi põhisisu -->
    <button @click="showModal = true">Ava modaalaken</button>

    <!-- Modaalakna sisu, teleportides #modal-target-i -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Modaalakna pealkiri</h2>
          <p>Modaalakna tekst.</p>
          <button @click="showModal = false">Sulge</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Komponendi stiilid */
</style>

to atribuut näitab sihtkonteineri DOM-is, kuhu <Teleport> sisu liigutatakse. Selleks võib olla:

CSS selektori rida (näiteks, #modal-target, .container)
DOM element (saadud kasutades document.getElementById() või document.querySelector())

Kui sihtkonteinerit ei leita, ei kuvata sisu.

HTML-i struktuuri näide:

<body>
  <div id="app">
    <!-- Siia renderdatakse Vue rakendus -->
  </div>

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

Komponendi olek (showModal) ja selle loogika jäävad komponendiga seotud, isegi kui osa renderdatakse teises kohas. See muudab teleportid võimsaks tööriistaks keerukate kasutajaliideste haldamiseks koos hüpik- ja pop-up elementidega.