<slot> (<slot>)
اسلات (Slot) جای خالی هوشمند است. بنابراین والد محتوا می فرستد و فرزند همان جا نمایش می دهد. مثل برگه سفید داخل پوشه مدرسه که متنش را هر بار تو می نویسی.
تعریف کوتاه و کاربرد
اسلات در قالب فرزند قرار می گیرد. سپس هر محتوایی بین تگِ کامپوننت در والد بنویسی، اینجا رندر می شود. همچنین اسلات می تواند نام دار باشد یا داده به والد برگرداند.
مثال 1: اسلات ساده
<template>
<div>
<p>SlotComp.vue</p>
<slot></slot>
</div>
</template>
مثال 2: اسلات نام دار با 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>Two slots inside the component.</p>
<slot-comp v-slot:bottomSlot>
Hello!
</slot-comp>
مثال 3: محتوای پیش فرض (Fallback)
<!-- SlotComp.vue -->
<template>
<div>
<slot>
<h4>This is fallback content</h4>
</slot>
</div>
</template>
<!-- App.vue -->
<template>
<slot-comp><!-- Empty --></slot-comp>
<slot-comp>
<h4>This content is provided from App.vue</h4>
</slot-comp>
</template>
مثال 4: اسلات محدوده دار (Scoped Slot)
<!-- SlotComp.vue -->
<template>
<slot
v-for="x in foods"
:key="x"
:foodName="x"
></slot>
</template>
<script>
export default {
data() {
return {
foods: ['Apple', 'Pizza', 'Rice', 'Fish', 'Cake']
};
}
};
<\/script>
<!-- App.vue -->
<slot-comp v-slot="food">
<h2>{{ food.foodName }}</h2>
</slot-comp>
گام های عملی
- در فرزند یک <slot> بگذار. سپس ذخیره کن.
- در والد، بین تگ کامپوننت محتوا بنویس. سپس نتیجه ببین.
- اگر چند جای خالی می خواهی، از نام اسلات استفاده کن.
- اگر داده لازم است، اسلاتِ محدوده دار تعریف کن.
نکته: اسلات بی نام، اسلات پیش فرض است. بنابراین محتوا اول به آن می رود.
لینک های داخلی
برای درک بهتر کامپوننت پویا را ببین و صفحه المان های توکار را مرور کن. همچنین راهنمای اسلات در Vue را نشانه گذاری کن.
جمع بندی سریع
- <slot> فقط جای خالی محتواست.
- می تواند پیش فرض داشته باشد.
- اسلات نام دار مسیر محتوا را مشخص می کند.
- اسلاتِ محدوده دار داده به والد می دهد.