<Teleport> نقل المحتوى إلى مكان آخر
آخر تحديث: 2026-10-22
<Teleport> نقل المحتوى إلى مكان آخر
يعرض
| المجموعة | المدمجات |
|---|---|
| النوع | مكوّن / عنصر |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<Teleport to="body">
<div class="modal">Modal content</div>
</Teleport>⚙️ الوسائط
| props | to (محدِّد selector أو عنصر) وdisabled |
|---|
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The modal mounts under body, escaping the #app container.💡 نقاط مهمة
ℹ️ ملاحظة منطقيًا يبقى المحتوى ابنًا للمكوّن — فتدفّق البيانات لا يتغيّر.
💡 نصيحة وجّه المحتوى إلى body أو حاوية طبقات مخصصة لتجنّب مشكلات القص والتراكب.
ℹ️ ملاحظة استخدم v-if للترتيب بين عدة عمليات نقل؛ وdisabled يعرض المحتوى في مكانه.
🏷️ المدمجات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا تُقص النوافذ المنبثقة؟
ج الأسلاف التي عليها overflow أو تحويلات transform تقصّها؛ والنقل عبر Teleport يتجاوز ذلك.
س هل تستمر الأحداث في التدرّج (bubbling) داخل الشجرة؟
ج تتبع أحداث DOM شجرة DOM الحقيقية، بينما تبقى دلالات المكوّن سليمة.
س هل يمكن التوجيه إلى حاوية مخصصة؟
ج نعم — باستخدام to="#modal-root"، بشرط وجود العنصر الهدف.
