Vue v-slot
নামযুক্ত স্লটগুলি নির্দিষ্ট করার জন্য আমাদের ভি-স্লট কৌশল প্রয়োজন।
নামযুক্ত স্লটগুলি চাইল্ড কম্পোনেন্টের টেমপ্লেটে কন্টেন্ট কোথায় রাখা হয়েছে তার উপর আরও নিয়ন্ত্রণের অনুমতি দেয়।
নামযুক্ত স্লটগুলি আরও নমনীয় এবং পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করতে ব্যবহার করা যেতে পারে।
একাধিক স্লটে সমস্যা
ভি-স্লট এবং নামযুক্ত স্লট ব্যবহার করার আগে, আসুন দেখে নেওয়া যাক যদি আমরা কম্পোনেন্টে দুটি স্লট ব্যবহার করি:
উদাহরণ
আপনার নিজস্ব Vue সার্ভার পান
// App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>// SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot></slot>
</div>সমস্যা:
একটি উপাদান দুটি স্লট আছে এবং বিষয়বস্তু উভয় স্লটে প্রদর্শিত হবে. আমাদের দরকার নেই!
ভি-স্লট এবং নামযুক্ত স্লট
স্লট ম্যাপিং
App.vue
v-slot:topSlot
SlotComp.vue
<slot name="topSlot">
যদি একটি উপাদানের একাধিক <slot> থাকে কিন্তু কোন <slot> বিষয়বস্তুতে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে চান, তাহলে স্লটগুলির নাম দিন এবং বিষয়বস্তুটিকে সঠিক স্থানে নির্দেশ করতে v-slot ব্যবহার করুন।
উদাহরণ
আমরা স্লটগুলির বিভিন্ন নাম দিই যাতে সেগুলি আলাদা করা যায়।
// SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>এখন আমরা App.vue-এ v-slot ব্যবহার করতে পারি সঠিক স্লটে কন্টেন্ট পাঠানোর জন্য।
// App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>ডিফল্ট স্লট
আপনার যদি একটি নাম ছাড়া একটি <slot> থাকে, তাহলে সেটি <slot> ডিফল্ট v-slot:default দিয়ে চিহ্নিত উপাদানে অথবা v-slot দিয়ে চিহ্নিত না করা উপাদানগুলিতে।
এটি কীভাবে কাজ করে তা দেখতে, আমাদের আগের উদাহরণে দুটি ছোট পরিবর্তন করতে হবে:
ইতিমধ্যে উল্লেখ করা হয়েছে
বিষয়বস্তুটি ডিফল্ট স্লটের অন্তর্গত তা আরও স্পষ্ট করার জন্য, আপনি বিষয়বস্তুটিকে ডিফল্ট মান v-slot:default দিয়ে চিহ্নিত করতে পারেন।
উপাদান (SlotComp.vue)
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>অভিভাবক (App.vue)
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:default>'Default slot'</slot-comp><টেমপ্লেট>-এ v-স্লট
আপনি দেখতে পাচ্ছেন, কম্পোনেন্ট ট্যাগে ভি-স্লট কৌশলটি একটি বৈশিষ্ট্য হিসাবে ব্যবহার করা যেতে পারে।
v-slot একটি <টেমপ্লেট> ট্যাগেও ব্যবহার করা যেতে পারে কন্টেন্টের বড় অংশগুলিকে একটি নির্দিষ্ট <slot>-এ নির্দেশ করতে।
উদাহরণ
// App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>// SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div><টেমপ্লেট> ব্যবহার:
আমরা <টেমপ্লেট> ট্যাগ ব্যবহার করি কিছু বিষয়বস্তুকে একটি নির্দিষ্ট <স্লটে> নির্দেশ করতে কারণ <টেমপ্লেট> ট্যাগটি রেন্ডার করা হয় না, এটি বিষয়বস্তুর জন্য একটি স্থানধারক মাত্র। কনফিগার করা পৃষ্ঠাটি পরিদর্শন করে এটি দেখা যেতে পারে: টেমপ্লেট ট্যাগটি সেখানে দৃশ্যমান নয়।
ভি-স্লট সংক্ষিপ্ত রূপ #
ভি-স্লটের সংক্ষিপ্ত রূপ হল #।
এর অর্থ:
<slot-comp v-slot:topSlot>'Hello!'</slot-comp>হিসাবে লেখা যেতে পারে:
<slot-comp #topSlot>'Hello!'</slot-comp>উদাহরণ
App.vue
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp #topSlot>'Hello!'</slot-comp>SlotComp.vue
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>শর্টহ্যান্ড সুবিধা:
# শর্টহ্যান্ড কোডকে ছোট করে এবং সহজে পড়া যায়, বিশেষ করে যখন একাধিক নামযুক্ত স্লট সহ উপাদানগুলির সাথে কাজ করে।
ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন
যদি একটি উপাদান 'ComOne'-এর দুটি স্লট থাকে, তাহলে এটি দেখতে এরকম হবে:
<slot name="headerSlot"></slot>
<slot name="mainSlot"></slot>কিভাবে, App.vue থেকে, 'compOne'-এ 'mainSlot' পর্যন্ত 'প্রাণীরা আকর্ষণীয়!' আপনি টেক্সট চালাতে পারেন?
<slot-comp
>
Animals are interesting!
</slot-comp>