$props ($props)
«آبجکت $props» در Vue فهرست «پراپ ها (Props)» با مقدار فعلی است. پراپ یعنی داده ای که مثل «صفت» از والد به فرزند می دهیم. این آبجکت فقط خواندنی است. اما گاهی کمک می کند پراپ ها را پایین تر پاس دهیم یا روی آن ها مقدار «محاسبه شده (Computed)» بسازیم.
تعریف و کاربرد آبجکت $props
$props همان پراپ های تعریف شده کامپوننت است. مقدارها همیشه تازه است. می توان آن را به نوه پاس داد یا در computed استفاده کرد. توجه کن، $props فقط خواندنی است؛ مستقیم تغییرش نده.
نمونه سریع: نمایش پراپ های دریافتی
اینجا محتویات $props را در <pre> نشان می دهیم. مثل دیدن کیف ابزار.
<template>
<div>
<h3>Received Props</h3>
<p>This is the $props object:</p>
<pre>{{ this.$props }}</pre>
</div>
</template>
نمونه 1: پاس دادن همه پراپ ها به نوه
گاهی می خواهی همان چیزها به نوه برسد. با v-bind="$props" همه را یک جا می دهیم.
<template>
<div>
<h3>InfoBox.vue</h3>
<p>Props received from App.vue and passed to grand-child:</p>
<pre>{{ this.$props }}</pre>
<grand-child v-bind="$props" />
</div>
</template>
<script>
export default {
props: [
'bagOwner',
'bagWeight'
]
};
<\/script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
margin-top: 20px;
max-width: 370px;
}
</style>
نمونه 2: ساخت مقدار محاسبه شده از روی پراپ
اینجا با توجه به وزن کیف، پیام می سازیم. مثل کارت گزارش مدرسه.
<template>
<div>
<h3>InfoBox.vue</h3>
<p>Computed message based on bag weight:</p>
<span>{{ this.bagWeightStatus }}</span>
</div>
</template>
<script>
export default {
props: [
'bagWeight'
],
computed: {
bagWeightStatus() {
if (this.$props.bagWeight > 10) {
return 'Puh, this bag is heavy!';
}
else {
return 'This bag is not so heavy.';
}
}
}
};
<\/script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
span {
background-color: lightgreen;
padding: 5px 10px;
font-weight: bold;
}
</style>
نکته و نگه داری بهتر
نکته: $props فقط خواندنی است. برای تغییر داده از پایین، الگوی پراپ ها همراه computed و v-bind را درست به کار ببر. همچنین می توانی از $parent یا $refs در سناریوهای خاص استفاده کنی. برای مرجع، لینک «آبجکت $props» را نگه دار.
جمع بندی سریع
- $props لیست پراپ های فعلی است.
- فقط خواندنی است؛ تغییرش نده.
- با v-bind="$props" همه را پاس بده.
- در computed، روی پراپ ها منطق بساز.