شرح props في Vue.js

انت تقصد props في vueJS وهي كالتالي:

ومعناها الخصائص وهي تستخدم في اطارات عمل الFront-end بشكل عام وهدفها هو تمرير البيانات من المكون الأب إلى المكون الابن.

مثال:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MessageDisplay',
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

هذا هو المكون الابن الذي سوف ننشئه فمثلا نريد أن نطبع رسالة لكن هذه الرسالة قد تختلف من مكان الى اخر وقد نستخدم المكون عدة مرات فنريد ان تطبع الرسالة بشكل مرن أكثر فمررنا props باسم message.

والان فلنشرح كيفية استخدامها.

<template>
  <div>
    <MessageDisplay message="Hello1!" />
    <MessageDisplay message="Hello2!" />
  </div>
</template>

<script>
import MessageDisplay from './components/MessageDisplay.vue';

export default {
  name: 'App',
  components: {
    MessageDisplay
  }
}
</script>

كما نلاحظ اخذنا اسم المكون الابن واستعملها في اسم الاب وبدلا من ان ننشئ نص جديد في كل حالة فنحن نستعدي المكون ونكتب له الخاصية message التي هي props ومنها يفهم اننا نريد كتابة هذه الرسالة فنختصر علينا كتابة الأكواد المكررة باعادة استخدام المكون الابن.

إن ال Props هي اختصار ل Properties وهي وسيلة لتمرير البيانات من مكون أب (Parent) إلى مكون ابن (Child) في Vue.js و تعتبر ال Props للقراءة فقط ولا يمكن للمكون الابن تعديلها مباشرة.

ومن مميزات ال Props في Vue هي :

• دعم TypeScript حيث يمكن تحديد أنواع الـ Props بدقة
• يمكنك التحقق من نوع القيمة الممررة.
• وأيضا إمكانية تحديد قيم افتراضية لل Props.

وإليك المثال التالي للمكون الأب (ParentComponent.vue) :

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent
      :username="user.name"
      :user-age="user.age"
      :hobbies="user.hobbies"
      :is-admin="false"
      @user-clicked="handleUserClick"
    >
      <p>Data</p>
    </ChildComponent>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const user = ref({
  name: "mohamed",
  age: 28,
  hobbies: ["reading", "programming"]
});

const handleUserClick = () => {
  console.log("clicked");
};
</script>

وهذا كود المكون الابن (ChildComponent.vue) بالطريقة الحديثة مع <script setup>

<template>
  <div class="user-card" @click="emit('user-clicked')">
    <h2>Hi {{ username }}!</h2>
    <p>age: {{ userAge }} year</p>
    <p>Hoppies: {{ hobbies.join('، ') }}</p>
    <p v-if="isAdmin" class="admin-badge">Admin</p>
    <slot></slot> <!-- هذا مكان المحتوى الإضافي -->
  </div>
</template>

<script setup>
const props = defineProps({
  username: {
    type: String,
    default: "user"
  },
  userAge: {
    type: Number,
    required: true
  },
  hobbies: {
    type: Array,
    default: () => [] // القيمة الافتراضية للمصفوفات يجب أن تكون دالة
  },
  isAdmin: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['user-clicked']);
</script>

<style scoped>
.user-card {
  border: 1px solid #ddd;
  padding: 1rem;
  margin: 1rem 0;
}
.admin-badge {
  color: red;
  font-weight: bold;
}
</style>

وال Props في Vue 3 أصبحت أكثر قوة ومرونة وخصوصا مع دعم TypeScript ووظيفة <script setup> التي تجعل الكود أكثر نظافة وسهولة في القراءة.

السلام عليكم ورحمة الله تعالى وبركاته،

في Vue.js الحديثة سواء Vue 3 أو باستخدام Composition API،ال props هي الطريقة التي نستخدمها لتمرير البيانات من مكون أب (Parent) إلى مكون ابن (Child).

وهذا يشبه إرسال برامترز لكي يستعملها المكون الابن والفكرة هنا أن المكون الأب يحدد القيم، والمكون الابن يستقبلها ويعرضها أو يستخدمها داخليا.

ويتم تعريف props داخل المكون الابن، إما كمصفوفة من الأسماء أو ككائن لتحديد نوع البيانات المطلوبة.

في Vue 3 يتم ذلك باستخدام <script setup>،وبذلك يصبح التعامل مع props أسهل وأبسط، ويتم تعريفها مباشرة باستخدام defineProps() هنا المكون الأب:

<template>
  <ChildComponent name="hsoub" age="25" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

والمكون الإبن:

<template>
  <div>
    <h2>الاسم: {{ name }}</h2>
    <p>العمر: {{ age }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  name: String,
  age: Number
})
</script>

لاحظ كيف أن ChildComponent يستقبل name و age من ParentComponent وهنا استخدمنا defineProps لتعريف الخصائص المتوقعة، وحددنا نوع كل خاصية وهذا يسهل قراءة الكود ويمنع كثير من الأخطاء ف props تجعل المكونات مرنة وقابلة لإعادة الاستخدام ومتماشية مع مبادئ البرمجة النظيفة.