معرفی props و ارسال داده‌ها بین کامپوننت‌ها در Vue.js
در Vue.js، ارسال داده‌ها بین کامپوننت‌ها یک بخش حیاتی از ساختار اپلیکیشن است. برای این کار از props استفاده می‌شود که امکان انتقال داده‌ها از کامپوننت والد به کامپوننت فرزند را فراهم می‌کند. این امکان به شما کمک می‌کند که داده‌ها را به صورت کنترل‌شده و بهینه بین کامپوننت‌ها منتقل کنید.
مفهوم props در Vue.js
props یک ویژگی در Vue است که به شما این امکان رو می‌ده که داده‌ها رو از کامپوننت والد به کامپوننت فرزند منتقل کنید. در واقع، props یک رابط برای ارسال داده‌ها از کامپوننت والد به فرزند است.
مثال ساده از استفاده از props:
فرض کنید یک کامپوننت والد داریم که می‌خواهد پیامی را به یک کامپوننت فرزند ارسال کند:
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
data() {
return {
parentMessage: 'سلام از والد!'
}
},
components: {
ChildComponent
}
}
</script>
در اینجا:
- parentMessage در کامپوننت والد قرار دارد.
- با استفاده از ":message="parentMessage، داده parentMessage به کامپوننت فرزند ارسال می‌شود.
در کامپوننت فرزند:
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
در اینجا:
- props: ['message'] به Vue می‌گه که کامپوننت فرزند باید یک ویژگی به نام message دریافت کنه.
- مقدار message در کامپوننت فرزند نمایش داده می‌شود.
ویژگی‌های props
۱. انتقال داده از والد به فرزند
- کامپوننت والد داده‌ها رو از طریق props به کامپوننت فرزند می‌فرسته.
- کامپوننت فرزند می‌تونه از props برای دسترسی به داده‌ها استفاده کنه، اما نمی‌تونه اون‌ها رو تغییر بده.
۲. تعریف props به صورت دقیق‌تر
شما می‌تونید نوع داده و الزامات برای props رو مشخص کنید. این کمک می‌کنه که داده‌ها همیشه به شکل صحیح به کامپوننت‌ها ارسال بشن.
export default {
props: {
message: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
}
}
</script>
در اینجا:
- message باید از نوع String باشد و ارسال آن الزامی است (required: true).
- count اگر ارسال نشود، مقدار پیش‌فرض آن 0 خواهد بود.
۳. اعتبارسنجی props
Vue این امکان رو به شما می‌ده که نوع داده، الزامی بودن و حتی محدودیت‌های خاصی رو برای props تعریف کنید، مثلاً یک عدد مثبت یا یک رشته خاص.
export default {
props: {
age: {
type: Number,
validator(value) {
// باید یک عدد مثبت باشد
return value > 0
}
}
}
}
</script>
اگر age یک عدد منفی ارسال بشه، Vue هشدار می‌ده که داده معتبر نیست.
ارسال داده‌ها از فرزند به والد (با استفاده از events)
Vue اجازه می‌ده که فرزند داده‌ها یا اطلاعاتی رو به والد ارسال کنه، اما این کار به صورت مستقیم انجام نمی‌شود. برای ارسال داده‌ها از فرزند به والد، باید از رویدادها (events) استفاده کنید.
مثال از ارسال داده از فرزند به والد:
کامپوننت فرزند:
<template>
<div>
<button @click="sendMessageToParent">ارسال پیام به والد</button>
</div>
</template>
<script>
export default {
methods: {
sendMessageToParent() {
this.$emit('messageSent', 'پیام از فرزند!')
}
}
}
</script>
در اینجا:
- متد sendMessageToParent با استفاده از this.$emit رویدادی به نام messageSent را به والد ارسال می‌کند.
- داده‌ای که همراه با رویداد فرستاده می‌شود (در اینجا 'پیام از فرزند!')، به عنوان پارامتر به والد ارسال می‌شود.
کامپوننت والد:
<template>
<div>
<ChildComponent @messageSent="receiveMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
receiveMessage(message) {
console.log('دریافت شد:', message)
}
}
}
</script>
در اینجا:
- @messageSent="receiveMessage" باعث می‌شود که وقتی رویداد messageSent از فرزند ارسال شد، متد receiveMessage در والد اجرا بشه.
- داده‌ی ارسال‌شده (پیامی که فرزند فرستاده) به عنوان پارامتر به متد receiveMessage وارد می‌شود.
مزایای استفاده از props در Vue
- تفکیک مسئولیت‌ها: با استفاده از props، هر کامپوننت مسئولیت خاص خودش رو داره و از این طریق داده‌ها فقط از والد به فرزند ارسال می‌شوند. این باعث می‌شه که مدیریت و نگهداری کد راحت‌تر باشه.
- داده‌های کنترل‌شده: کامپوننت فرزند نمی‌تونه داده‌های دریافتی از والد رو تغییر بده. این باعث می‌شه که شما به‌طور کامل کنترل داشته باشید که داده‌ها چگونه در اپلیکیشن شما جریان پیدا کنند.
- امکان اعتبارسنجی داده‌ها: با استفاده از ویژگی‌های type و validator می‌تونید از ارسال داده‌های نامعتبر جلوگیری کنید.
جمع‌بندی
- props به شما این امکان رو می‌ده که داده‌ها رو از کامپوننت والد به فرزند منتقل کنید.
- فرزند نمی‌تونه داده‌های props رو تغییر بده، اما می‌تونه داده‌هایی رو به والد ارسال کنه.
- برای ارسال داده از فرزند به والد از emit$ استفاده می‌کنیم.
- شما می‌تونید نوع داده‌ها، الزامی بودن و اعتبارسنجی برای props رو تعیین کنید.
