كيفية تمرير الخصائص إلى المكونات في Vue.js مع Vue-router

عند استخدام vue-router لإنشاء مسارات في تطبيقك، يتم تعيين المكون لكل مسار باستخدام الكائن component كما فعلت في مثالك. لكن الطريقة التي يمكنك من خلالها تمرير الخصائص إلى المكون تختلف قليلاً.

في حالتك، يمكنك تمرير الخصائص إلى المكون باستخدام الكائن props داخل الكائن component في تعريف المسار. هناك طريقتين لفعل ذلك:

1. عند تعريف المسار، يمكنك تحديد الخصائص المطلوب تمريرها كخاصية props للمكون:

javascriptCopy code
router.map({
    '/bar': {
        component: Bar,
        props: {
            'my-props': 'hello!'
        }
    }
});

وبهذه الطريقة، ستتم تمرير القيمة “hello!” إلى الخاصية my-props في المكون Bar عندما يتم تطابق المسار.

2. يمكنك استخدام دالة props لتمرير الخصائص إلى المكون بناءً على بعض البيانات الديناميكية. في هذه الحالة، يمكنك تحديد دالة تعيد كائنًا يحتوي على القيم التي ترغب في تمريرها:

javascriptCopy code
router.map({
    '/bar': {
        component: Bar,
        props: (route) => ({
            'my-props': route.query.value
        })
    }
});

في هذا المثال، سيتم تمرير قيمة value من الاستعلام الخاص بالمسار إلى الخاصية my-props في المكون Bar.

باستخدام أي من هذه الطرق، يمكنك تمرير الخصائص إلى المكون الذي يتم تقديمه تلقائيًا عند توافق المسار.

بالطبع! في Vue.js، يمكنك أيضًا استخدام props بشكل أكثر تعقيدًا باستخدام دالة props لتمرير البيانات بناءً على بعض الشروط. على سبيل المثال، إذا كان لديك عنصر تحكم يحدد ما إذا كان يجب على المكون قبول الخاصية أم لا، يمكنك تحقيق ذلك بالتالي:

javascriptCopy code
router.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 إلى المكون كخصائص. وبهذه الطريقة، يمكنك الوصول إلى جميع البيانات الممررة إلى المكون دون الحاجة إلى تحديد كل خاصية على حدة:

javascriptCopy code
router.map({
    '/bar/:myProps': {
        component: Bar,
        props: true
    }
});

هذه هي بعض الطرق التي يمكنك من خلالها تمرير الخصائص إلى المكونات التي يتم تقديمها تلقائيًا عند توافق المسار في Vue.js باستخدام vue-router.