كيف تعمل المكونات والخصائص في Vue؟

Question

Accepted Answer

**المكونات** هي أجزاء قابلة لإعادة الاستخدام ومكتفية بذاتها من واجهة المستخدم. **الخصائص (Props)** هي الطريقة التي ينقل بها الأب البيانات *لأسفل* إلى الابن — فهي مدخلات الابن المكتوبة وقراءة فقط. ## تعريف الخصائص في الابن ```vue ``` ## تمرير الخصائص من الأب ```vue ``` لاحظ الفرق: `name="Ann"` يمرر سلسلة نصية حرفية، بينما `:age="30"` (مع `v-bind`) يقيّم تعبيراً — وهو ضروري للأرقام والقيم المنطقية والكائنات أو المتغيرات. لاحظ أيضاً أن أسماء الخصائص تكون بصيغة `camelCase` في JavaScript لكن `kebab-case` في القوالب (`isAdmin` → `:is-admin`). ## الخصائص أحادية الاتجاه وقراءة فقط ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` تتدفق البيانات **لأسفل** (من الأب إلى الابن). يجب ألا يعدّل الابن خصائصه؛ إذا احتاج إلى تغيير شيء ما، فإما أنه يستخدم نسخة محلية أو **ينبث حدثاً** يطلب من الأب تغيير المصدر ("خصائص لأسفل، أحداث لأعلى"). يحافظ هذا التدفق أحادي الاتجاه على البيانات قابلة للتنبؤ بها. ## خصائص TypeScript ```vue ``` ## لماذا يهمك ذلك المكونات + الخصائص هي أساس معمارية Vue — تؤلف واجهات المستخدم من مكونات قابلة لإعادة الاستخدام وتعدّها عبر الخصائص. فهم أن الخصائص **أحادية الاتجاه وقراءة فقط** (بيانات لأسفل، أحداث لأعلى) هو نموذج التفكير الأساسي الذي يحافظ على تطبيقات Vue متنبأ بها؛ تعديل الخصائص أو توقع تدفق خصائص ثنائي الاتجاه هو مصدر كلاسيكي للأخطاء.