Teleport component کیا ہے؟

Question

Accepted Answer

`` ایک component کی markup کو DOM میں **مختلف جگہ پر render** کرتا ہے بجائے اس کے کہ وہ آپ کے component tree میں declare کی گئی ہو — لیکن منطقی طور پر یہ component کا حصہ رہتا ہے (reactivity، props، events سب کام کرتے ہیں)۔ ## مسئلہ جو یہ حل کرتا ہے Modals، tooltips، اور notifications کو اکثر **`` کا براہ راست بچہ** ہونا پڑتا ہے CSS کے مسائل سے بچنے کے لیے — parent کا `overflow: hidden`، `transform`، یا `z-index` stacking context ایک modal کو clip یا غلط طریقے سے layer کر سکتا ہے۔ لیکن منطقی طور پر، modal اس component سے تعلق رکھتا ہے جو اسے trigger کرتا ہے۔ ## Teleport استعمال کرنا ```vue ``` Modal کی markup real DOM میں **`` کا بچہ** بن جاتی ہے، کسی بھی clipping/stacking والے parents سے بچتے ہوئے — لیکن `open`، `@click`، اور کوئی بھی props مکمل طور پر reactive رہتے ہیں، کیونکہ منطقی طور پر یہ اب بھی اس component کا حصہ ہے۔ ## "to body" layout bugs کو کیوں ٹھیک کرتا ہے ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Trap کرنے والے ancestors سے بچ کر، modal پوری طرح viewport کو cover کر سکتا ہے اور ایک predictable `z-index` کے ساتھ تمام دوسری content کے اوپر بیٹھ سکتا ہے۔ ## Target کوئی بھی selector ہو سکتا ہے ```vue ... ... ``` ## اہمیت کیوں رکھتی ہے Teleport overlays (modals، tooltips، toasts، dropdowns) کے CSS مسئلے کو صاف ستھرا حل کرتا ہے کہ وہ ان کے DOM ancestors سے clip یا غلط stacked ہوں۔ یہ آپ کو overlay کو وہاں author کرنے دیتا ہے جہاں وہ منطقی طور پر تعلق رکھتا ہے (triggering component کے اندر، مکمل reactivity کے ساتھ) جبکہ اسے وہاں render کرتے ہوئے جہاں اسے DOM میں ہونا ہے (عام طور پر ``)۔ یہ Vue کا built-in React portals کے برابر ہے — overlay UI بنانے کا معیاری، مضبوط طریقہ۔