اسلات ها (Slots)
اسلات (Slot) یعنی «جای خالیِ محتوا» داخل کامپوننت. والد، متن یا HTML را می فرستد؛ فرزند آن را جایگذاری می کند. مثل برگه تمرین که جاهایی نقطه چین دارد و تو پاسخ را می نویسی.
اسلات چیست؟
تا اینجا کامپوننت را خودبسته نوشتیم. اما می توانیم بین برچسب های باز و بسته، محتوا بدهیم.
<!-- App.vue -->
<template>
<slot-comp />
</template>
<!-- App.vue -->
<template>
<slot-comp>Hello World!</slot-comp>
</template>
برای نمایش محتوا در فرزند، تگ <slot> می گذاریم تا جایگزین شود.
<!-- SlotComp.vue -->
<template>
<div>
<p>SlotComp.vue</p>
<slot></slot>
</div>
</template>
اسلات به عنوان کارت
می توانیم محتوای متنوع بدهیم و درون کامپوننت، ظاهر کارت بسازیم.
<!-- 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>
<!-- SlotComp.vue -->
<template>
<div>
<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)
اگر والد محتوا نداد، می توانیم متن پیش فرض داخل اسلات نمایش دهیم.
<!-- 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>
نکته و ادامه مسیر
نکته: اسلات محتوا را جابه جا نمی کند؛ فقط جایگذاری می کند. برای نام گذاری و داده اسلات ها بعداً به v-slot برو. همچنین برای مدیریت کامپوننت ها به کامپوننت های محلی سر بزن.
جمع بندی سریع
- اسلات، جای خالیِ محتواست.
- والد محتوا می فرستد؛ فرزند نمایش می دهد.
- می توان کارت های تکرارشدنی ساخت.
- Fallback یعنی متن پیش فرض داخل اسلات.