Vue স্লট
স্লটগুলি Vue-তে একটি শক্তিশালী বৈশিষ্ট্য যা আরও নমনীয় এবং পুনরায় ব্যবহারযোগ্য উপাদানগুলির জন্য অনুমতি দেয়।
আমরা পিতামাতার কাছ থেকে শিশু উপাদানের <টেমপ্লেট>-এ সামগ্রী প্রেরণ করতে Vue-তে স্লট ব্যবহার করি।
স্লট
এখন পর্যন্ত আমরা <টেমপ্লেট>-এর ভিতরে স্ব-ক্লোজিং ট্যাগ হিসাবে উপাদানগুলি ব্যবহার করেছি:
App.vue:
<template>
<slot-comp />
</template>পরিবর্তে, আমরা খোলা এবং বন্ধ করার ট্যাগ ব্যবহার করতে পারি এবং ভিতরে কিছু বিষয়বস্তু রাখতে পারি, উদাহরণস্বরূপ একটি পাঠ্য:
App.vue:
<template>
<slot-comp>Hello World!</slot-comp>
</template>কিন্তু 'হ্যালো ওয়ার্ল্ড!' এটিকে কম্পোনেন্টের ভিতরে পেতে এবং আমাদের পৃষ্ঠায় প্রদর্শন করতে, আমাদের কম্পোনেন্টের ভিতরে <slot> ট্যাগ ব্যবহার করতে হবে। <slot> ট্যাগ বিষয়বস্তুর জন্য একটি স্থানধারক হিসাবে কাজ করে, যাতে অ্যাপ্লিকেশনটি তৈরি হওয়ার পরে <slot> এটিতে পাঠানো সামগ্রী দ্বারা প্রতিস্থাপিত হয়।
আপনার নিজস্ব Vue সার্ভার পান
SlotComp.vue:
<template>
<div>
<p>SlotComp.vue</p>
<slot></slot>
</div>
</template>এটি কীভাবে কাজ করে তা দেখতে "এটি নিজে চেষ্টা করুন" বোতামে ক্লিক করুন৷
কার্ড হিসাবে স্লট
একটি কার্ডের মত চেহারা অর্জন করতে গতিশীল এইচটিএমএল সামগ্রীর বড় অংশ মোড়ানোর জন্য স্লট ব্যবহার করা যেতে পারে।
পূর্বে আমরা উপাদানগুলির মধ্যে সামগ্রী তৈরি করার জন্য প্রপ হিসাবে ডেটা পাস করতাম, এখন আমরা সরাসরি <slot> ট্যাগের ভিতরে HTML সামগ্রী পাস করতে পারি।
উদাহরণ
App.vue:
<template>
<h3>Slots in Vue</h3>
<p>We create card-like div boxes from the foods array.</p>
<div id="wrapper">
<slot-comp v-for="x in foods">
<img v-bind:src="x.url">
<h4>{{x.name}}</h4>
<p>{{x.desc}}</p>
</slot-comp>
</div>
</template>যখন আমরা বিষয়বস্তু উপাদানের ভিতরে <slot> এ যাই, তখন আমরা <slot> এর চারপাশে একটি div ব্যবহার করি এবং আমাদের অ্যাপ্লিকেশনের অন্যান্য ডিভগুলিকে প্রভাবিত না করে সামগ্রীর চারপাশে একটি কার্ডের মতো চেহারা তৈরি করতে স্থানীয়ভাবে <div> স্টাইল করি।
SlotComp.vue:
<template>
<div> <!-- This div makes the card-like appearance -->
<slot></slot>
</div>
</template>
<script></script>
<style scoped>
div {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius: 10px;
margin: 10px;
}
</style>সামগ্রীর চারপাশে কার্ডের মতো ফ্রেম তৈরি করে এমন উপাদানগুলি বিভিন্ন উপাদান তৈরি করতে পুনরায় ব্যবহার করা যেতে পারে, তবে একই কার্ডের মতো ফ্রেমের চারপাশে।
উদাহরণ
এই উদাহরণে, আমরা খাদ্য আইটেমগুলির মতো একই উপাদান ব্যবহার করে একটি ফুটার তৈরি করি।
App.vue:
<template>
<h3>Reusable Slot Cards</h3>
<p>We create card-like div boxes from the foods array.</p>
<p>We also create a card-like footer by reusing the same component.</p>
<div id="wrapper">
<slot-comp v-for="x in foods">
<img v-bind:src="x.url">
<h4>{{x.name}}</h4>
</slot-comp>
</div>
<footer>
<slot-comp>
<h4>Footer</h4>
</slot-comp>
</footer>
</template>Fallback Content
যদি কোনো কম্পোনেন্ট কন্টেন্ট ছাড়া তৈরি করা হয়, তাহলে আমরা <slot>-এ ফলব্যাক কন্টেন্ট রাখতে পারি।
উদাহরণ
এই অ্যাপ্লিকেশনে বিষয়বস্তু প্রথম উপাদানে রেন্ডার করা হয় না, তাই ফলব্যাক বিষয়বস্তু রেন্ডার করা হয়।
App.vue:
<template>
<h3>Slots Fallback Content</h3>
<p>A component without content provided can have fallback content in the slot tag.</p>
<slot-comp>
<!-- Empty -->
</slot-comp>
<slot-comp>
<h4>This content is provided from App.vue</h4>
</slot-comp>
</template>SlotComp.vue:
<template>
<div>
<slot>
<h4>This is fallback content</h4>
</slot>
</div>
</template>ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন
প্রশিক্ষণ:
এইভাবে যখন একটি পাঠ্য একটি উপাদানের স্টার্ট ট্যাগ এবং শেষ ট্যাগের মধ্যে পাস করা হয়:
<comp-one>Hello World!</comp-one>প্রদত্ত পাঠ্যটি উপাদানের স্লট ব্যবহার করে প্রাপ্ত করা যেতে পারে, যেমন:
<template>
<div>
<p>CompOne.vue</p>
</div>
</template>