پراپس (props)
پراپس (Props) یعنی «ورودیِ کامپوننت». مثل تکلیفِ معلم که به شاگرد می دهد. والد مقدار می فرستد، فرزند فقط استفاده می کند.
تعریف و حالت های props
گزینه props می تواند آرایه باشد یا شیء. در آرایه، فقط نام ها می آیند. در شیء، نوع، پیش فرض، اجباری بودن و اعتبارسنجی هم داریم.
نمونه ساده: تعریف props با آرایه
<script>
export default {
props: [
'foodName',
'foodDesc'
]
};
<\/script>
نمونه کامل: تنظیم نوع، پیش فرض و اجباری
<template>
<div>
<h2>{{ foodName }}</h2>
<p>{{ foodDesc }}</p>
</div>
</template>
<script>
export default {
props: {
foodName: {
type: String,
required: true
},
foodDesc: {
type: String,
required: false,
default: 'This is the food description...'
}
}
};
<\/script>
<style>
/* استایل آزمایشی برای نمایش کارت ها */
<\/style>
گام های عملی استفاده از props
- در فرزند، نام پراپس ها را تعریف کن.
- در والد، مقدار را با ویژگی HTML بفرست.
- در قالب فرزند، مقدار را نمایش یا مصرف کن.
نکته: نوع نادرست در توسعه «هشدار» می دهد. اما اجرای برنامه متوقف نمی شود.
هشدار: پراپس «فقط خواندنی» است. آن را در فرزند تغییر نده. اگر نیاز داری، کپی محلی بساز.
جمع بندی سریع
- پراپس ورودیِ کامپوننت فرزند است.
- آرایه ساده، شیء پیشرفته است.
- type و default کیفیت را بالا می برند.
- required نبود مقدار را گوشزد می کند.
- validator قوانین دلخواه را چک می کند.
مطالب مرتبط داخلی: emits برای رویداد برگشتی، و watch برای واکنش به تغییرات.
منابع در W3Schools: مرجع props، Vue Props، و $emit().