$refs مجموعة مراجع القوالب
آخر تحديث: 2026-10-22
$refs مجموعة مراجع القوالب
تحفظ $refs العناصر أو نُسخ المكوّنات الموسومة بسمة ref في القالب: تستفيد منها السكربتات للوصول إلى DOM أو استدعاء دوال المكوّنات الأبناء.
| المجموعة | الخيارات: التركيب ومتنوع |
|---|---|
| النوع | خيار |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
export default {
mounted() {
this.$refs.input.focus()
}
}⚙️ الوسائط
| value | بلا وسائط: قراءة الخاصية، ومفاتيحها أسماء مراجع القالب |
|---|
القيمة المُرجعة：عنصر أو نسخة مكوّن (null قبل التحميل؛ ومصفوفة داخل v-for)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The input is focused on load and refocused by the button.💡 نقاط مهمة
⚠️ تحذير $refs ليس تفاعلياً: لا تكتبه في القوالب أو computed.
ℹ️ ملاحظة المراجع داخل v-for تُعطي مصفوفات، ولا يضمن ترتيبها مطابقة ترتيب البيانات.
💡 نصيحة تستخدم واجهة التركيب ref()/useTemplateRef() بدلاً منها، بنطاق أوضح.
🏷️ التركيب ومتنوع ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا تكون undefined قبل mounted؟
ج لأن DOM لم يُنشأ بعد، فلم تُسند المراجع بعد.
س هل يمكن الوصول إلى بيانات المكوّن الابن؟
ج فقط إذا كشفه الابن (الكل مكشوف افتراضياً؛ ويمكن لـ defineExpose تقييده).
س هل يمكن أن يحل محل التواصل بالأحداث؟
ج غير مستحسن: استدعاء الأب لدوال الابن يكسر التغليف؛ الأفضل props/emits و provide.
