Vue $props অবজেক্ট
$props বর্তমান মান সহ অবজেক্ট এলিমেন্টে ঘোষিত প্রপস উপস্থাপন করে।
Vue প্রপস হল সন্তানের উপাদানগুলিতে বৈশিষ্ট্য হিসাবে মানগুলি পাস করার একটি উপায়।
আপনার নিজস্ব Vue সার্ভার পান
প্রাপ্ত প্রপস প্রদর্শন করতে $props অবজেক্ট ব্যবহার করে।
Example
<template>
<div>
<h3>Received Props</h3>
<p>This is the $props object:</p>
<pre>{{ this.$props }}</pre>
</div>
</template>দ্রষ্টব্য:
নীচে আরো উদাহরণ দেখুন.
সংজ্ঞা এবং প্রয়োগ
$props বর্তমান মান সহ অবজেক্ট এলিমেন্টে ঘোষিত প্রপস উপস্থাপন করে।
Vue প্রপস হল সন্তানের উপাদানগুলিতে বৈশিষ্ট্য হিসাবে মানগুলি পাস করার একটি উপায়। প্রপসের জন্য Vue টিউটোরিয়াল পৃষ্ঠাটি দেখুন।
$props অবজেক্ট ব্যবহার করে, আপনি উদাহরণস্বরূপ পরবর্তী চাইল্ড কম্পোনেন্টে প্রপস পাঠাতে পারেন (নীচে উদাহরণ 1 দেখুন), অথবা একটি প্রপের উপর ভিত্তি করে একটি গণনা করা সম্পত্তি সেট করুন (নীচে উদাহরণ 2 দেখুন)।
দ্রষ্টব্য:
$props অবজেক্ট শুধুমাত্র পঠিত হয়।
আরো উদাহরণ
Example 1
$props অবজেক্ট ব্যবহার করে পরবর্তী চাইল্ড কম্পোনেন্টে প্রপস পাস করা।
Template
<template>
<div>
<h3>InfoBox.vue</h3>
<p>This is the $props object that is received from App.vue and passed down to the next child component:</p>
<pre>{{ this.$props }}</pre>
<grand-child v-bind="$props" />
</div>
</template>Script
<script>
export default {
props: [
'bagOwner',
'bagWeight'
]
}
</script>Example 2
গণনা করা বৈশিষ্ট্যে $props অবজেক্ট ব্যবহার করে, আমরা ব্যাগের ওজনের উপর ভিত্তি করে একটি প্রতিক্রিয়া বার্তা তৈরি করি।
Template
<template>
<div>
<h3>InfoBox.vue</h3>
<p>The $props object is used in a computed value to create a message based on the weight of the bag:</p>
<span>{{ this.bagWeightStatus }}</span>
</div>
</template>Script
<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>