v-slot (v-slot)
اینجا «آموزش v-slot» را ساده می گوییم. «اسلات (Slot)» جای خالی محتوا در یک کامپوننت است. با v-slot محتوا را به اسلات های نام دار می فرستیم. همچنین می توانیم داده اسلات را بگیریم.
تعریف و کاربرد v-slot
v-slot محتوا را به اسلات نام دار هدایت می کند. نگارش کوتاه # است. این دستور روی خود کامپوننت یا روی <template> می آید. برای چند اسلات، از چند <template> استفاده کن. همچنین با اسلات های حوزه دار، داده هم می گیریم.
نمونه پایه: اسلات نام دار
پیام "Hello!" به اسلات نام دار bottomSlot می رود.
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
دادن محتوا به چند اسلات
اینجا دو اسلات داریم: topSlot و bottomSlot. با دو <template> پرشان می کنیم.
<template>
<h1>App.vue</h1>
<p>دو اسلات داریم و هرکدام جدا پر می شوند.</p>
<slot-comp>
<template v-slot:topSlot>
<div>
<p>Tigers are beautiful!</p>
<img src="tiger.svg" alt="tiger" width="100">
</div>
</template>
<template v-slot:bottomSlot>
<div>
<p>Whales can be very big</p>
</div>
</template>
</slot-comp>
</template>
<!-- SlotComp.vue -->
<template>
<hr>
<h3>Component</h3>
<slot name="topSlot"></slot>
<slot name="bottomSlot"></slot>
</template>
اسلات پیش فرض با v-slot:default
اگر اسلات نام دار نباشد، نامش «پیش فرض» است. بنابراین با 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>یک اسلات پیش فرض داریم.</p>
<slot-comp v-slot:default>'Default slot'</slot-comp>
نگارش کوتاه: #name
به جای v-slot:name می توانیم #name بنویسیم. این کوتاه تر و رایج است.
<!-- App.vue -->
<h1>App.vue</h1>
<p>از نگارش کوتاه برای اسلات استفاده کن.</p>
<slot-comp #topSlot>'Hello!'</slot-comp>
<!-- SlotComp.vue -->
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
اسلات حوزه دار: دریافت داده
وقتی فرزند با v-bind داده می فرستد، والد آن را با v-slot می گیرد.
<!-- App.vue -->
<slot-comp v-slot="dataFromSlot">
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
گام های عملی
- در فرزند اسلات نام دار بساز.
- در والد با
v-slotمحتوا را تزریق کن. - برای چند اسلات، چند
<template>استفاده کن.
جمع بندی سریع
- v-slot محتوا را به اسلات می فرستد.
- نگارش کوتاه
#سریع تر است. - برای چند اسلات، از چند template استفاده کن.
- با اسلات حوزه دار، داده دریافت می شود.
نکته: برای نمایش ساده مشروط، صفحه v-show را هم ببین. همچنین درباره ساخت کامپوننت، صفحه کامپوننت ها را مرور کن.