Teleport component भनेको के हो?

Question

Accepted Answer

`` ले एक component को markup लाई तपाईंको component tree मा declared गरिएको स्थान भन्दा **DOM को फरक स्थानमा** render गर्छ — तर यो logically component को हिस्सा रहन्छ (reactivity, props, events सबै काम गरिरहन्छ)। ## समस्या जसलाई यसले समाधान गर्छ Modals, tooltips, र notifications प्राय: CSS समस्या बच्नको लागि **`` को direct child** हुन आवश्यक छ — parent को `overflow: hidden`, `transform`, वा `z-index` stacking context ले modal लाई clip वा गलत layer गर्न सक्छ। तर logically, modal त्यस component को हो जसले यसलाई trigger गर्छ। ## Teleport प्रयोग गर्दै ```vue ``` Modal markup **moved** हुन्छ real DOM मा `` को child बन्न, कुनै पनि clipping/stacking parents बाट बच्दै — तपनी `open`, `@click`, र कुनै पनि props पूर्ण रूपमा reactive रहन्छ, किनभने logically यो अझै पनि यो component को हिस्सा हो। ## किन "to body" ले layout bugs लाई ठीक गर्छ ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Trapping ancestors बाट बच्दै, modal पूरै viewport लाई cover गर्न र predictable `z-index` सँग सबै अन्य content को माथिमा बस्न सक्छ। ## Target कुनै पनि selector हुन सक्छ ```vue ... ... ``` ## किन यो महत्त्वपूर्ण छ Teleport ले overlays (modals, tooltips, toasts, dropdowns) को क्लासिक CSS समस्यालाई जो clipped वा mis-stacked हुन्छन् तिनीहरूको DOM ancestors द्वारा, स्वच्छतापूर्वक समाधान गर्छ। यसले तपाईंलाई overlay लाई logically जहाँ यो सम्बन्धित छ (triggering component भित्र, पूर्ण reactivity सँग) वहाँ लेखक बन्न दिन्छ जबकि यसलाई DOM मा जहाँ यो आवश्यक छ (सामान्यतः ``) वहाँ render गरिन्छ। यो Vue को React portals को built-in equivalent हो — overlay UI बनाउने मानक, robust तरिका।