methods دوال معالجة الأحداث
آخر تحديث: 2026-10-22
methods دوال معالجة الأحداث
يجمّع خيار methods دوال المكوّن في مكان واحد: معالجة الأحداث والدوال المساعدة كلها تُكتب هنا، وتُستدعى بالاسم في القالب.
| المجموعة | الخيارات: الحالة |
|---|---|
| النوع | خيار |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
export default {
data() { return { count: 0 } },
methods: {
add(n) { this.count += n }
}
}⚙️ الوسائط
| value | كائن: المفاتيح أسماء الدوال، والقيم دوال (this يشير إلى نسخة المكوّن) |
|---|
القيمة المُرجعة：لا توجد اتفاقية لقيمة مُعادة (القيمة المُعادة لا تدخل في التحديث التلقائي للقالب)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The buttons add 1 and 5 respectively.💡 نقاط مهمة
⚠️ تحذير لا تستخدم الدوال السهمية: فهي لا تربط this فلا تصل إلى نسخة المكوّن.
💡 نصيحة في القالب تمرّر @click="add" مرجع الدالة (وتستلم كائن الحدث تلقائياً)، ولا تكتب الأقواس إلا لتمرير وسائط.
ℹ️ ملاحظة القيم المشتقة تُفضَّل فيها computed، واترك methods لمنطق «ذي سلوك».
🏷️ الحالة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف يتقاسم methods و computed العمل؟
ج ما يحتاج تخزيناً مؤقتاً ويُستخدم كقيمة → computed؛ وما يحتاج وسائط وينفّذ إجراءً → methods.
س لماذا تكون this أحياناً undefined؟
ج غالباً استُخدمت دالة سهمية، أو فُكّكت الدالة خارج النسخة واستُدعيت منفردة.
س هل تستطيع دالة داخل methods استدعاء دالة أخرى؟
ج نعم: this.other()، فـ this يشير إلى النسخة نفسها.
