v-slot (v-slot)
«v-slot» یک دیرکتیو (Directive) است؛ یعنی دستور کوتاه Vue برای وصل کردن محتوا به اسلات نام دار. با آن مشخص می کنیم هر تکه محتوا دقیقاً در کجای قالب فرزند قرار بگیرد؛ مثل برگه امتحان که بخش «سؤال 1» و «سؤال 2» جداست.
چرا v-slot؟
اگر چند اسلات (Slot) بدون نام داشته باشیم، محتوا در همه می نشیند. نتیجه، تکرار است.
<!-- 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>
اسلات های نام دار با v-slot
برای کنترل جای محتوا، اسلات ها را نام گذاری می کنیم و از v-slot استفاده می کنیم.
<!-- SlotComp.vue -->
<h3>Component</h3>
<div>
<slot name="topSlot"></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:bottomSlot>'Hello!'</slot-comp>
اسلات پیش فرض (Default)
اسلاتِ بی نام می شود «پیش فرض». اگر v-slot ندهیم، محتوا آنجاست.
<!-- 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-slot داخل <template>
برای ارسال چند عنصر باهم به یک اسلات، از تگ template استفاده می کنیم.
<!-- 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>
میان بر # برای v-slot
می توانیم v-slot:topSlot را کوتاه بنویسیم: #topSlot. کوتاه تر و تمیزتر.
<!-- 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>
نکته و ادامه مسیر
نکته: نام اسلات ها را واضح انتخاب کن. سپس از اسلات ها شروع کن و برای الگوهای پیشرفته، صفحه اسلات های Scoped را ببین.
جمع بندی سریع
- v-slot، راه هدف گیری اسلاتِ درست است.
- اسلاتِ بی نام، پیش فرض محتوای عادی است.
- template برای ارسال چند عنصر کنارهم است.
- # میان بر v-slot است و کد را کوتاه می کند.