Τι είναι τα τηλεμεταφορικά στο Vue;

Το Vue 3 παρέχει το <Teleport> ως έναν τρόπο να αποδίδεται το περιεχόμενο ενός συστατικού σε άλλο μέρος του δέντρου DOM, χωρίς να εξαρτάται από την πραγματική θέση του συστατικού στη ιεραρχία.

Αυτό είναι χρήσιμο για:

Παράθυρα διαλόγου και αναδυόμενα παράθυρα: Επιτρέπει την εύκολη μεταφορά ενός διαλόγου ή ειδοποίησης σε ριζικά στοιχεία <body> ή <html>, αποφεύγοντας προβλήματα με το z-index και το κόψιμο από γονικά στοιχεία.
Επαναχρησιμοποιήσιμα συστατικά: Επιτρέπει τη δημιουργία συστατικών που μπορούν να αποδίδουν μέρος του περιεχομένου τους σε διαφορετικά σημεία, διατηρώντας τη λογική τους σε ένα μόνο συστατικό.

Σύνταξη χρήσης του <Teleport>:

<template>
  <div>
    <!-- Κύριο περιεχόμενο του συστατικού -->
    <button @click="showModal = true">Άνοιγμα διαλόγου</button>

    <!-- Περιεχόμενο διαλόγου, που teleport-άρεται στο #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Τίτλος διαλόγου</h2>
          <p>Κείμενο διαλόγου.</p>
          <button @click="showModal = false">Κλείσιμο</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Στυλ για το συστατικό */
</style>

Το χαρακτηριστικό to δείχνει το στόχο κοντέινερ στο DOM, στον οποίο θα μετακινηθεί το περιεχόμενο του <Teleport>. Ο στόχος μπορεί να είναι:

Μια συμβολοσειρά επιλογέα CSS (π.χ., #modal-target, .container).
Ένα στοιχείο DOM (που λαμβάνεται μέσω document.getElementById() ή document.querySelector()).

Εάν ο στόχος κοντέινερ δεν βρεθεί, το περιεχόμενο δεν θα εμφανιστεί.

Παράδειγμα δομής HTML:

<body>
  <div id="app">
    <!-- Εδώ θα αποδοθεί η Vue εφαρμογή -->
  </div>

  <!-- Στόχος κοντέινερ για το teleport -->
  <div id="modal-target"></div>
</body>

Η κατάσταση του συστατικού (showModal) και η λογική του παραμένουν συνδεδεμένα με το συστατικό, ακόμα και αν ένα μέρος του αποδίδεται σε διαφορετικό μέρος. Αυτό καθιστά τα teleport ισχυρό εργαλείο για τη διαχείριση πολύπλοκων διεπαφών χρήστη με αιωρούμενα στοιχεία.