ما هو مكون Teleport؟

Question

Accepted Answer

`` يعرض markup المكون في **مكان مختلف في DOM** عن المكان الذي يتم التصريح عنه في شجرة المكونات الخاصة بك — مع الحفاظ عليه منطقياً كجزء من المكون (التفاعلية، Props، والأحداث تعمل جميعها بشكل طبيعي). ## المشكلة التي يحلها عادةً ما تحتاج المشاهد النمطية (Modals) والتلميحات والإخطارات إلى أن تكون **فرعاً مباشراً من ``** لتجنب مشاكل CSS — يمكن أن يؤدي `overflow: hidden` أو `transform` أو سياق `z-index` stacking من الوالد إلى قطع المشهد النمطي أو وضعه بشكل خاطئ. لكن منطقياً، المشهد النمطي ينتمي إلى المكون الذي يثيره. ## استخدام Teleport ```vue ``` يتم **نقل** markup المشهد النمطي ليكون فرعاً من `` في 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 يحل بشكل نظيف المشكلة الكلاسيكية في CSS وهي قطع الطبقات العلوية (المشاهد النمطية والتلميحات والإشعارات المنبثقة والقوائم المنسدلة) أو وضعها بشكل خاطئ من قبل أسلافها في DOM. يسمح لك بكتابة الطبقة العلوية حيث تنتمي منطقياً (داخل المكون المُثير، مع التفاعلية الكاملة) بينما يتم عرضها حيث تحتاج إلى أن تكون في DOM (عادةً ``). إنه معادل Vue المدمج لـ React portals — الطريقة القياسية والقوية لبناء واجهة مستخدم الطبقات العلوية.