useAttrs() الحصول على الخصائص المُمرَّرة

آخر تحديث: 2026-10-22

useAttrs() الحصول على الخصائص المُمرَّرة

تُعيد useAttrs() الخصائص المُمرَّرة غير المصرَّح بها في props/emits (مثل class وid ومستمعي الأحداث)، وتُستخدم للتوزيع اليدوي.

المجموعةالقوالب والمساعدات
النوعAPI
النطاقداخل المكوّن
إصدار Vue3.0+
دعم SSRمدعوم

📝 الصيغة

const attrs = useAttrs()
// القالب: <div v-bind="attrs"></div>

القيمة المُرجعة:كائن تفاعلي (لا يستجيب للتغييرات اللاحقة، لكن يمكن قراءة أحدث قيمة منه)

▶ مثال

عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:

المخرجات:

The button carries both classes and the data attribute.

💡 نقاط مهمة

ℹ️ ملاحظة عند عدم التصريح بـ props تسقط الخصائص المُمرَّرة افتراضيًا على العنصر الجذر تلقائيًا؛ وتُستخدم هذه الدالة فقط عند الحاجة إلى إنزالها على عنصر داخلي غير جذري.
⚠️ تحذير لا تحاول تعديل attrs: فهي للقراءة فقط، والتعديل يُصدر تحذيرًا دون فائدة.
💡 نصيحة تُستخدم مع inheritAttrs: false: أي إيقاف التمرير التلقائي ثم التوزيع يدويًا بدقة.
المزيد من الحالات قريباً.

📚 دروس ذات صلة

❓ الأسئلة الشائعة

س ما الفرق بينها وبين $attrs؟
ج نسخة الـ API التركيبية، والوظيفة نفسها؛ أما $attrs فهي صيغة القالب/النسخة.
س هل تتزامن attrs مع تحديث المكوّن الأب؟
ج تتزامن إلى أحدث قيمة، لكن الكائن بذاته ليس تفاعليًا بعمق (القيم الداخلية لا تُطلق تتبع الاعتماديات).
س متى يصبح التوزيع اليدوي ضروريًا؟
ج عندما يكون للمكوّن عدة عناصر جذرية، أو عند الحاجة إلى وضع الخصائص على عنصر داخلي محدد.
Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%