Teleport घटक क्या है?

Question

Accepted Answer

`` किसी घटक के मार्कअप को आपके घटक पेड़ में जहां घोषित किया गया है उससे **DOM में एक अलग जगह** पर प्रदान करता है — इसे तार्किक रूप से घटक का हिस्सा रखते हुए (प्रतिक्रियाशीलता, props, इवेंट्स सभी अभी भी काम करते हैं)। ## यह समस्या को हल करता है मोडल्स, टूलटिप्स, और सूचनाओं को अक्सर CSS समस्याओं से बचने के लिए `` का **प्रत्यक्ष बच्चा** होने की आवश्यकता होती है — माता-पिता का `overflow: hidden`, `transform`, या `z-index` स्टैकिंग संदर्भ एक मोडल को क्लिप कर सकता है या गलत तरीके से स्तर कर सकता है। लेकिन तार्किक रूप से, मोडल उस घटक से संबंधित है जो इसे ट्रिगर करता है। ## Teleport का उपयोग ```vue ``` मोडल मार्कअप को **स्थानांतरित** किया जाता है ताकि वह वास्तविक DOM में `` का बच्चा बन जाए, किसी भी क्लिपिंग/स्टैकिंग माता-पिता से बचते हुए — फिर भी `open`, `@click`, और कोई भी props पूरी तरह से प्रतिक्रियाशील रहते हैं, क्योंकि तार्किक रूप से यह अभी भी इस घटक का हिस्सा है। ## "to body" लेआउट बग को कैसे ठीक करता है ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` फँसाने वाले पूर्वजों से बचने के द्वारा, मोडल विश्वसनीय रूप से पूरे viewport को कवर कर सकता है और एक अनुमानित `z-index` के साथ सभी अन्य सामग्री के ऊपर बैठ सकता है। ## लक्ष्य कोई भी चयनकर्ता हो सकता है ```vue ... ... ``` ## यह महत्वपूर्ण क्यों है Teleport ने overlays (मोडल्स, टूलटिप्स, टोस्ट्स, ड्रॉपडाउन) की क्लासिक CSS समस्या को सुंदर तरीके से हल किया है जो उनके DOM पूर्वजों द्वारा क्लिप या गलत स्तरीय हो रहे हैं। यह आपको overlay को जहां तार्किक रूप से संबंधित है (ट्रिगर करने वाले घटक के अंदर, पूर्ण प्रतिक्रियाशीलता के साथ) लिखने देता है जबकि इसे DOM में जहां इसकी आवश्यकता है वहां (आमतौर पर ``)। यह Vue का React portals का अंतर्निर्मित समकक्ष है — overlay UI बनाने का मानक, मजबूत तरीका।