كيفية تمرير الخصائص إلى المكونات في Vue.js مع Vue-router
عند استخدام vue-router
لإنشاء مسارات في تطبيقك، يتم تعيين المكون لكل مسار باستخدام الكائن component
كما فعلت في مثالك. لكن الطريقة التي يمكنك من خلالها تمرير الخصائص إلى المكون تختلف قليلاً.
في حالتك، يمكنك تمرير الخصائص إلى المكون باستخدام الكائن props
داخل الكائن component
في تعريف المسار. هناك طريقتين لفعل ذلك:
- عند تعريف المسار، يمكنك تحديد الخصائص المطلوب تمريرها كخاصية
props
للمكون:
javascriptrouter.map({
'/bar': {
component: Bar,
props: {
'my-props': 'hello!'
}
}
});
وبهذه الطريقة، ستتم تمرير القيمة “hello!” إلى الخاصية my-props
في المكون Bar
عندما يتم تطابق المسار.
- يمكنك استخدام دالة
props
لتمرير الخصائص إلى المكون بناءً على بعض البيانات الديناميكية. في هذه الحالة، يمكنك تحديد دالة تعيد كائنًا يحتوي على القيم التي ترغب في تمريرها:
javascriptrouter.map({
'/bar': {
component: Bar,
props: (route) => ({
'my-props': route.query.value
})
}
});
في هذا المثال، سيتم تمرير قيمة value
من الاستعلام الخاص بالمسار إلى الخاصية my-props
في المكون Bar
.
باستخدام أي من هذه الطرق، يمكنك تمرير الخصائص إلى المكون الذي يتم تقديمه تلقائيًا عند توافق المسار.
المزيد من المعلومات
بالطبع! في Vue.js، يمكنك أيضًا استخدام props
بشكل أكثر تعقيدًا باستخدام دالة props
لتمرير البيانات بناءً على بعض الشروط. على سبيل المثال، إذا كان لديك عنصر تحكم يحدد ما إذا كان يجب على المكون قبول الخاصية أم لا، يمكنك تحقيق ذلك بالتالي:
javascriptrouter.map({
'/bar/:acceptProps': {
component: Bar,
props: (route) => ({
'my-props': route.params.acceptProps === 'true' ? 'hello!' : null
})
}
});
في هذا المثال، إذا كان قيمة acceptProps
في الرابط تساوي 'true'
، سيتم تمرير القيمة 'hello!'
إلى الخاصية my-props
في المكون Bar
، وإلا فسيتم تمرير قيمة null
.
إلى جانب ذلك، يمكنك أيضًا استخدام props: true
لتمرير جميع البيانات في route.params
إلى المكون كخصائص. وبهذه الطريقة، يمكنك الوصول إلى جميع البيانات الممررة إلى المكون دون الحاجة إلى تحديد كل خاصية على حدة:
javascriptrouter.map({
'/bar/:myProps': {
component: Bar,
props: true
}
});
هذه هي بعض الطرق التي يمكنك من خلالها تمرير الخصائص إلى المكونات التي يتم تقديمها تلقائيًا عند توافق المسار في Vue.js باستخدام vue-router
.