ابزارهای Vue به شما این امکان را می‌دهند که ویژگی‌های سفارشی را روی یک جزء ثبت کنید. دقیقاً نحوه استفاده از آنها را بیابید.
یکی از ویژگی‌های کلیدی Vue معماری ماژولار آن است که به شما امکان می‌دهد با ترکیب اجزای کوچک و قابل استفاده مجدد، برنامه‌های وب بسازید. این به شما امکان می دهد برنامه وب خود را به راحتی به روز رسانی و نگهداری کنید.
هر کامپوننت در Vue می‌تواند مجموعه داده‌ها و روش‌های مخصوص به خود را داشته باشد که می‌توانید آنها را به اجزای فرزند آن با props منتقل کنید. در اینجا، نحوه استفاده از props در Vue را برای انتقال داده ها از مولفه های والد به فرزند یاد خواهید گرفت.
Props در Vue چیست؟
Props – مخفف “properties” – ویژگی های سفارشی Vue هستند که یک جزء والد می تواند به اجزای فرزند خود منتقل کند.
در Vue، مولفه‌های والد، پروپ‌ها را به اجزای فرزند در یک جریان یک‌جهت ارسال می‌کنند. این بدان معنی است که مؤلفه‌های فرزند فقط می‌توانند این موارد ارسالی را بخوانند و از آنها استفاده کنند، اما نمی‌توانند داده‌ها را تغییر دهند.
استفاده از props به شما امکان می دهد اجزای قابل استفاده مجدد ایجاد کنید که بتوانید در سراسر برنامه خود اعمال کنید. لوازم جانبی باعث صرفه جویی در وقت و تلاش شما می شود، زیرا می توانید به جای ایجاد اجزای جدید از ابتدا، از اجزاء استفاده مجدد کنید.
چگونه Props را در Vue پاس کنیم
ارسال props در Vue ساده است و با روشی که در React می دهید متفاوت است. برای ارسال یک props از کامپوننت والد به مؤلفه فرزند آن در Vue، از گزینه props در اسکریپت مؤلفه فرزند استفاده کنید.
در اینجا یک مثال است:
<!-- The child component -->
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<p>{{ emailAddress }}</p>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props: ["title", "message", "emailAddress"],
};
</script>
بلوک کد بالا یک مؤلفه فرزند Vue را توصیف می کند که از پروپوزال برای ارسال داده از یک مؤلفه والد استفاده می کند. این مؤلفه شامل سه عنصر HTML است که ویژگی های عنوان، پیام و آدرس ایمیل را با درون یابی نمایش می دهد.
گزینه props در مولفه فرزند مجموعه‌ای از ویژگی‌ها را می‌گیرد. این آرایه خصوصیاتی را که مؤلفه فرزند از مؤلفه والد می پذیرد، تعریف می کند.
در اینجا نمونه ای از مولفه والد Vue است که داده ها را به مولفه فرزند با props ارسال می کند:
<!-- parent component -->
<template>
<div>
<child-component
title="Hello World"
message="This is a message from the parent component"
emailAddress="user0000@example.com"
/>
</div>
</template>
<script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
name: "ParentComponent",
components: {
ChildComponent,
},
};
</script>
مؤلفه والد در بلوک کد بالا سه پروپ را به مؤلفه فرزند ارسال می کند. بلوک کد مقادیر استاتیک را به عنوان، پیام و آدرس ایمیل ارسال می کند.
همچنین می توانید با دستور v-bind مقادیر پویا را به props خود منتقل کنید. v-bind دستورالعملی است که در Vue برای اتصال داده ها به ویژگی های HTML استفاده می شود.
در اینجا نمونه ای از مولفه والد Vue است که از دستور v-bind برای ارسال مقادیر پویا به props استفاده می کند:
<!-- parent component -->
<template>
<div>
<child-component
:title= "title"
:message= "message"
:emailAddress= "emailAddress"
/>
</div>
</template>
<script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
name: "ParentComponent",
components: {
ChildComponent,
},
data() {
return {
title: "Welcome dear",
message: "How are you",
emailAddress: "user0000@gmail.com",
};
},
};
</script>
با استفاده از دستور v-bind برای ارسال داده به مؤلفه فرزند، می توانید مقادیر props را بر اساس وضعیت مؤلفه والد به روز کنید. به عنوان مثال، با تغییر ویژگی data title در مولفه والد، عنوان prop ارسال شده به مؤلفه فرزند نیز به روز می شود.
این روش برای تعریف props به عنوان یک آرایه از رشته ها یک الگوی کوتاه نویسی است. هر یک از رشته های آرایه نشان دهنده یک پایه است. این روش زمانی ایده‌آل است که همه اجزای آرایه دارای یک نوع داده جاوا اسکریپت باشند.
تعریف Props به عنوان یک شی در Vue
تعریف props به‌عنوان یک شی جاوا اسکریپت به جای آرایه، امکان سفارشی‌سازی بهتر هر پایه را فراهم می‌کند. تعریف props به عنوان یک شی در یک جزء، شما را قادر می سازد تا نوع داده مورد انتظار و مقدار پیش فرض هر پایه را مشخص کنید.
علاوه بر این، می‌توانید در صورت نیاز، تکیه‌گاه‌های خاصی را علامت‌گذاری کنید، و در صورت عدم ارائه آن هنگام استفاده از مؤلفه، یک اخطار ایجاد کنید. تعریف props به عنوان یک شی، مزایای متعددی نسبت به تعریف props به عنوان یک آرایه دارد، از جمله:
- تعریف نوع داده مورد انتظار و مقدار پیش‌فرض برای هر پایه، درک دقیق نحوه استفاده از مؤلفه را برای شما و تیم توسعه‌دهنده آسان‌تر می‌کند.
- با علامت‌گذاری ابزارهای مورد نیاز، می‌توانید خطاها را در مراحل اولیه توسعه پیدا کنید و اطلاعات بیشتری را در اختیار تیم توسعه‌دهنده قرار دهید.
در اینجا مثالی از نحوه تعریف props به عنوان یک شی در یک جزء Vue.js آورده شده است:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<p>{{ emailAddress }}</p>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props: {
title: {
type: String,
default: "Default Title",
},
message: {
type: String,
default: "Default Message",
},
emailAddress: {
type: String,
required: true,
},
},
};
</script>
این بلوک کد نمونه ای از یک مؤلفه Vue.js است که از props برای انتقال داده ها از مؤلفه والد به مؤلفه فرزند استفاده می کند. بلوک کد این عناصر را به عنوان اشیایی با یک نوع و مقدار پیش‌فرض یا یک پرچم مورد نیاز تعریف می‌کند.
بلوک کد، عنوان و محتوای پیام را به عنوان رشته‌هایی با مقدار پیش‌فرض و props emailAddress را به عنوان رشته مورد نیاز تعریف می‌کند.
بهترین روشی را انتخاب کنید که مناسب برنامه Vue شما باشد
شما یاد گرفته اید که چگونه props را هم به عنوان یک آرایه و هم به عنوان شی تعریف کنید. اولویت شما باید با نیازهای خاص برنامه شما مطابقت داشته باشد.
Vue خود را به عنوان یک چارچوب جاوا اسکریپت بسیار انعطاف پذیر ثابت می کند. برای هر یک از گزینه ها یا روش هایی که برای کار انتخاب می کنید، روش ها و گزینه های زیادی برای رسیدن به یک هدف با مزایای متفاوت ارائه می دهد.