الدعائم المكون Vue.js

تستخدم الدعائم لتمرير الحالة إلى المكونات التابعة. تعلم كل شيء عنهم

حدد دعامة داخل المكون

الدعائم هي الطريقة التي يمكن بها للمكونات قبول البيانات من المكونات التي تتضمنها (المكونات الرئيسية)

عندما يتوقع المكون خاصية واحدة أو أكثر ، يجب أن تحددها فيpropsمنشأه:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

أو في مكون ملف واحد Vue:

<template>
  <p>{{ name }}</p>
</template>

<script> export default { props: [‘name’] } </script>

تقبل الدعائم المتعددة

يمكنك الحصول على دعامات متعددة بإلحاقها بالمصفوفة:

Vue.component('user-name', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

اضبط نوع الدعامة

يمكنك تحديد نوع الخاصية باستخدام كائن بدلاً من مصفوفة ، باستخدام اسم الخاصية كمفتاح لكل خاصية ، والنوع كقيمة:

Vue.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

الأنواع الصالحة التي يمكنك استخدامها هي:

  • خيط
  • عدد
  • قيمة منطقية
  • مجموعة مصفوفة
  • موضوع
  • تاريخ
  • وظيفة
  • رمز

عند عدم تطابق أحد الأنواع ، تنبيهات Vue (في وضع التطوير) في وحدة التحكم مع تحذير.

يمكن أن تكون أنواع الدعامة أكثر وضوحًا.

يمكنك السماح بالعديد من أنواع القيم المختلفة:

props: {
  firstName: [String, Number]
}

قم بتعيين الدعامة لتكون إلزامية

يمكنك طلب خاصية لتكون إلزامية:

props: {
  firstName: {
    type: String,
    required: true
  }
}

عيّن القيمة الافتراضية للدعامة

يمكنك تحديد قيمة افتراضية:

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

للكائنات:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

defaultيمكن أن تكون أيضًا دالة تُرجع قيمة مناسبة ، بدلاً من أن تكون القيمة الفعلية.

يمكنك أيضًا إنشاء مدقق مخصص ، وهو أمر رائع للبيانات المعقدة:

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

تمرير الدعائم إلى المكون

تقوم بتمرير خاصية إلى مكون باستخدام بناء الجملة

<ComponentName color="white" />

إذا كان ما تمرره قيمة ثابتة.

إذا كانت خاصية بيانات ، فأنت تستخدم

<template>
  <ComponentName :color=color />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

يمكنك استخدام عامل ثلاثي داخل قيمة prop للتحقق من صحة شرط وتمرير قيمة تعتمد عليه:

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

تحميل مجانيكتيب Vue


المزيد من دروس vue: