Vue $attrs Object
উদাহরণ
আপনার নিজস্ব Vue সার্ভার পান
<p> ট্যাগে আইডি ফলব্যাক অ্যাট্রিবিউট সেট করতে $attrs অবজেক্ট ব্যবহার করে।
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
</template>নীচে আরো উদাহরণ দেখুন.
সংজ্ঞা এবং প্রয়োগ
$attrs অবজেক্ট কম্পোনেন্ট ট্যাগে সেট করা স্ট্যাটিক অ্যাট্রিবিউট এবং ইভেন্ট শ্রোতাদের প্রতিনিধিত্ব করে।
যখন কোনো রুট এলিমেন্টকে কম্পোনেন্ট ট্যাগে সেট করা স্ট্যাটিক অ্যাট্রিবিউট এবং ইভেন্ট শ্রোতাদের উত্তরাধিকারী হতে হয়, আমরা সেই উপাদানটিতে v-bind="$attrs" ব্যবহার করি।
শুধু পড়ুন
$attrs অবজেক্ট শুধুমাত্র পঠিত হয়। আপনি এটা পরিবর্তন করতে পারবেন না.
পচনশীল গুণাবলী
নন-প্রপস অ্যাট্রিবিউটগুলি কম্পোনেন্ট ট্যাগে সেট করা হয় এবং কম্পোনেন্টের রুট এলিমেন্টে পড়ে।
একাধিক মূল উপাদান
যদি উপাদানটিতে একাধিক রুট উপাদান থাকে, তাহলে কোন উপাদানটি নেস্টেড বৈশিষ্ট্যগুলি পাবে তা নির্দিষ্ট করতে আমরা $attrs অবজেক্ট ব্যবহার করি।
গুরুত্বপূর্ণ নোট:
ফলিং অ্যাট্রিবিউট হল কম্পোনেন্ট ট্যাগে সেট করা অ্যাট্রিবিউট (প্রপস নয়), যা কম্পোনেন্টের রুট এলিমেন্টে পড়ে। যদি উপাদানটিতে একাধিক রুট উপাদান থাকে, তাহলে কোন উপাদানটি নেস্টেড বৈশিষ্ট্যগুলি পাবে তা নির্দিষ্ট করতে আমরা $attrs অবজেক্ট ব্যবহার করি। টিউটোরিয়ালে পচনশীল বৈশিষ্ট্য সম্পর্কে আরও জানুন।
আরো উদাহরণ
উদাহরণ 1
ডিফল্ট বৈশিষ্ট্য হল আইডি এবং শিরোনাম, এবং তাদের মান প্রদর্শন করতে $attrs অবজেক্ট ব্যবহার করে।
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
<hr>
<p><strong>Below is the content of the $attrs object:</strong></p>
<pre>{{ attrsObject }}</pre>
</template>
<script>
export default {
data() {
return {
attrsObject: null
}
},
mounted() {
console.log(this.$attrs);
this.attrsObject = this.$attrs;
}
}
</script>
<style>
#pink {
background-color: pink;
border-radius: 15px;
padding: 10px;
}
img {
width: 100%;
border-radius: 15px;
}
</style>পিতামাতার আবেদন:
<tiger-component id="pink" title="Tiger Information" ></tiger-component>
$attrs এর বিষয়বস্তু:
{
"id": "pink",
"title": "Tiger Information"
}
উদাহরণ 2
প্যারেন্ট এলিমেন্ট থেকে ইভেন্ট লিসেনার পেতে <img> ট্যাগে $attrs অবজেক্ট ব্যবহার করুন।
শিশু উপাদান (TigerComponent.vue):
<template>
<h3>Toggle Image Size</h3>
<p>Click the image to toggle the image size.</p>
<img v-bind="$attrs" src="/img_tiger_small.jpg" class="imgSmall">
</template>
<style>
.imgSmall {
width: 60%;
}
.imgLarge {
width: 100%;
}
img {
border-radius: 15px;
cursor: pointer;
}
</style>মূল উপাদান (App.vue):
<template>
<tiger-component @click="toggleImageSize" />
</template>
<script>
export default {
methods: {
toggleImageSize(event) {
const img = event.target;
img.classList.toggle('imgSmall');
img.classList.toggle('imgLarge');
}
}
}
</script>ইভেন্ট শ্রোতা বরাদ্দ:
এই উদাহরণে, প্যারেন্ট এলিমেন্ট থেকে @click ইভেন্ট লিসেনারকে $attrs এর মাধ্যমে চাইল্ড এলিমেন্টের <img> এলিমেন্ট অ্যাসাইন করা হয়েছে।
সাধারণ ব্যবহারের ক্ষেত্রে
$attrs বনাম প্রপস তুলনা
| বৈশিষ্ট্য | $attrs | প্রপস |
|---|---|---|
| উদ্দেশ্য | অধঃপতনযোগ্য বৈশিষ্ট্য/ইভেন্ট | কম্পোনেন্টে ডাটা পাঠাতে |
| লক্ষ্য করুন | স্বয়ংক্রিয়ভাবে (বিজ্ঞাপন করার প্রয়োজন নেই) | বিবৃতিতে এটি স্পষ্টভাবে বলা উচিত |
| পরিবর্তনশীলতা | শুধু পড়ুন | পিতামাতার দ্বারা পরিবর্তন করা যেতে পারে |
| টাইপ চেকিং | না | টাইপস্ক্রিপ্ট/স্বচ্ছ প্রকার |
| আবেদন | v-bind="$attrs" | :prop-name="value" |
ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন