Kas ir teleportācijas Vue?

Vue 3-ā teleportācijas ir veids, kā attēlot komponenta saturu citā DOM kokā, kas nav saistīta ar faktisko komponenta izvietojumu hierarhijā.

Tas ir noderīgi:

Modālie logi un uznirstošie logi: ļauj viegli pārvietot modālo logu vai uznirstošo paziņojumu uz <body> vai <html> galvenajiem elementiem, izvairoties no z-index problēmām un vecāku elementu sagriešanas.
Atkārtoti lietojami komponenti: dod iespēju izveidot komponentus, kas var attēlot savu satura daļu dažādās vietās, saglabājot savu loģiku vienā komponentā.

<Teleport> sintakse:

<template>
  <div>
    <!-- Komponenta galvenais saturs -->
    <button @click="showModal = true">Atvērt modālo logu</button>

    <!-- Modālā loga saturs, teleportēts uz #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Modālā loga virsraksts</h2>
          <p>Modālā loga teksts.</p>
          <button @click="showModal = false">Aizvērt</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Komponenta stili */
</style>

to atribūts norāda mērķa konteineru DOM, kur tiks pārvietots <Teleport> saturs. Mērķis var būt:

CSS selektora rinda (piemēram, #modal-target, .container)
DOM elements (iegūts ar document.getElementById() vai document.querySelector())

Ja mērķa konteineris netiek atrasts, saturs netiks rādīts.

HTML struktūras piemērs:

<body>
  <div id="app">
    <!-- Šeit tiks rādīta Vue lietojumprogramma -->
  </div>

  <!-- Teleport mērķa konteineris -->
  <div id="modal-target"></div>
</body>

Komponenta stāvoklis (showModal) un tā loģika paliek saistīta ar komponentu, pat ja tā daļa tiek rādīta citur. Tas padara teleportus par jaudīgu rīku sarežģītu lietotāja saskarnes elementu pārvaldībā.