<Teleport> एका घटकाचे मार्कअप आपल्या घटक वृक्षात जिथे घोषित केले जाते त्यापेक्षा DOM मध्ये वेगळ्या ठिकाणी रेंडर करते — परंतु तो तार्किकदृष्ट्या घटकाचा भाग राहतो (प्रतिक्रियाशीलता, props, इव्हेंट सर्व अजूनही काम करतात).
मॉडल्स, टूलटिप्स आणि अधिसूचना सहसा CSS समस्यांचे समाधान करण्यासाठी चे थेट मुल असणे आवश्यक असते — पालकांचा , किंवा स्टॅकिंग संदर्भ मॉडलचा क्लिप किंवा चुकीचे स्तर करू शकतो. परंतु तार्किकदृष्ट्या, मॉडल त्या घटकाचा आहे जो तो सक्रिय करतो.
<body>overflow: hiddentransformz-index<template>
<button @click="open = true">Open Modal</button>
<Teleport to="body"> <!-- render this elsewhere... -->
<div v-if="open" class="modal-overlay">
<div class="modal">
<p>I'm declared inside this component...</p>
<p>...but rendered as a child of <body>!</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>
मॉडलचा मार्कअप वास्तविक DOM मध्ये <body> चा मुल असण्यासाठी हलविला जातो, कोणत्याही क्लिपिंग/स्टॅकिंग पालकांपासून दूर जातो — तरी open, @click आणि कोणतेही props पूर्ण प्रतिक्रियाशील राहतात, कारण तार्किकदृष्ट्या हा अजूनही या घटकाचा भाग आहे.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
फंसलेल्या पूर्वजांपासून दूर जाऊन, मॉडल विश्वासार्हतेने संपूर्ण व्यूपोर्ट कव्हर करू शकतो आणि सर्व इतर सामग्रीच्या वर अनुमानित z-index सह बसू शकतो.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport overlays (मॉडल्स, टूलटिप्स, टोस्ट, ड्रॉपडाउन्स) चे क्लिप किंवा चुकीचे स्टॅक झालेल्या DOM पूर्वजांद्वारे केलेल्या क्लासिक CSS समस्येचे स्वच्छपणे निराकरण करते.
हे आपल्याला overlay तिथे लिहू देते जिथे तो तार्किकदृष्ट्या संबंधित आहे (सक्रिय करणारे घटक, पूर्ण प्रतिक्रियाशीलतेसह) जेव्हा DOM मध्ये जिथे त्याची आवश्यकता असते तिथे रेंडर करते (सामान्यतः <body>).
हे Vue चे React पोर्टल्सचे अंतर्निर्मित समतुल्य आहे — overlay UI तयार करण्याचा मानक, मजबूत मार्ग.