مقدمة 

سنقوم بإنشاء مشروع Vue لنستعمله لنقوم ببناء مشروعنا البسيط (عرض درجات الطلاب في قوائم), سأقوم باستخدام هذا المستودع الذي يحتوي على Vue + Laravel Mix. واترك لك الخيار في استخدامه او استخدام اي طريقة تريد.

تجهيز المشروع التعليمي 

بالبداية سنقوم بتعريف عنصر root-component وفي داخله سنقوم بتعرف كائن (Object) يحتوي على اسم وعلامة كل طالب. 
*ملاحظة: لن اقوم بشرح كيفية انشاء عنصر جديد, هذه ليست دورة Vue. 

الان سنقوم بتجهيز العناصر List One Component و List Two Component ووظيفتهم هي عرض علامات الطلبة داخل قائمة. 
سنحتاج ان نمرر الكائن "grades" الى العناصر (ListOne, ListTwo) بالتالي نحتاج الى تعريف Props داخل العنصرين : 
*ملاحظة: سنقوم بتطبيق نفس الخطوات في كلا العنصرين (ListOne, ListTwo).

 ثم نستخدم v-for لعرض الدرجات داخل <ul>:
 

سنقوم باضافة العناصر (ListOne, ListTwo) الى العنصر RootComponent :

العناصر جهازة لاستقبال الكائن "grades" وعرض محتوياته داخل القوائم, سنمرر الكائن "grades" الى العناصر الابناء (ListOne, ListTwo): 

الناتج: 
*ملاحظة: قمت باضافة بعض التنسيق لتفريق العنصر الاول (ListOne) عن العنصر الثاني (ListTwo).
 

هذه هي الطريقة الطبيعية لتمرير البيانات بين عناصر المشروع, وهي بسيطة وتفي بالغرض في حال اردت تمرير عنصر مباشرة من العنصر الاب الى العناصر الابناء.
لكن في اردت تمير عنصر من المستوى الاول على عنصر في المستوى الثالث مثلا فستجد انك مضطر لتمرير العنصر من المستوى الاول ثم المستوى الثاني ثم المستوى الثالث.
او مثلا اذا اردت ان تمرر بيانات من عنصر في المستوى الثالث الى عناصر في مختلف المستويات فلا بد من استخدام Events لفعل ذلك.

في الامثلة السابقة ستكون عملية نقل البيانات معقدة وغير منظمة ابدا , بينما اذا استخدمنا Vuex سيكون نقل البيانات اوضح وابسط بكثير. في الدرس القادم سنقوم باضافة Vuex للمشروع واستخدامه لنقل البيانات بين جميع العناصر بدون الحاجة الى Props.  

الدرس على Github