Τι είναι το component Teleport;

Question

Accepted Answer

`` αποδίδει το markup ενός component σε ένα **διαφορετικό σημείο του DOM** από αυτό όπου δηλώνεται στο δέντρο των components σας — διατηρώντας το λογικά ως μέρος του component (η αντιδραστικότητα, τα props, τα events λειτουργούν κανονικά). ## Το πρόβλημα που λύνει Ta Modals, tooltips και notifications συχνά χρειάζεται να είναι **άμεσα παιδιά του ``** για να αποφευχθούν προβλήματα CSS — το `overflow: hidden`, το `transform` ή το `z-index` stacking context ενός γονέα μπορεί να κόψει ή να κακο-τοποθετήσει ένα modal. Αλλά λογικά, το modal ανήκει στο component που το ενεργοποιεί. ## Χρήση του Teleport ```vue ``` Το markup του modal **μετακινείται** ώστε να γίνει παιδί του `` στο πραγματικό DOM, διαφεύγοντας οποιουδήποτε γονέα που περιορίζει — αλλά το `open`, το `@click` και τα props παραμένουν πλήρως αντιδραστικά, επειδή λογικά εξακολουθεί να είναι μέρος αυτού του component. ## Γιατί το "to body" διορθώνει σφάλματα layout ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Αν διαφύγετε τους γονείς που παγιδεύουν, το modal μπορεί αξιόπιστα να καλύψει ολόκληρη τη viewport και να κάθεται πάνω από όλο το άλλο περιεχόμενο με ένα προβλέψιμο `z-index`. ## Ο στόχος μπορεί να είναι οποιοσδήποτε selector ```vue ... ... ``` ## Γιατί έχει σημασία Το Teleport λύνει καθαρά το κλασσικό πρόβλημα CSS των overlays (modals, tooltips, toasts, dropdowns) που κόβονται ή κακο-στοιβάζονται από τους DOM προγόνους τους. Σας επιτρέπει να συντάσσετε το overlay εκεί όπου λογικά ανήκει (μέσα στο component που το ενεργοποιεί, με πλήρη αντιδραστικότητα) ενώ το αποδίδετε εκεί όπου χρειάζεται να είναι στο DOM (συνήθως ``). Είναι το ενσωματωμένο ισοδύναμο του Vue για React portals — ο τυπικός, ισχυρός τρόπος για τη δημιουργία overlay UI.