Vue-də slotlar nə üçün istifadə olunur və necə…

Vue-da slotlar xarici kontentni komponentlarga joylashtirish uchun ishlatiladi. Bu, moslashuvchan va qayta ishlatiladigan komponentlar yaratishga imkon beradi.

Uch turdagi slotlar mavjud:

Default Slotlar: Asosiy kontentni joylashtirish uchun ishlatiladi.

<template>
  <div>
    <slot></slot>
  </div>
</template>

Foydalanish:

<men-bizning-komponent>
  <p>Ushbu kontent default slotga joylashtiriladi.</p>
</men-bizning-komponent>

Nomlangan slotlar: Komponent ichidagi aniq slotlarga, nomlari bilan ajratilgan kontent joylashtirish imkonini beradi.

<template>
  <div>
    <slot name="header"></slot>
    <div>Asosiy kontent</div>
    <slot name="footer"></slot>
  </div>
</template>

Foydalanish:

<men-bizning-komponent>
  <template v-slot:header>
    <h2>Sarlavha</h2>
  </template>
  <template v-slot:footer>
    <p>Oyoq</p>
  </template>
</men-bizning-komponent>

v-slot uchun qisqartma sintaksisi:

<men-bizning-komponent>
  <template #header>
    <h2>Sarlavha (qisqartma sintaksis)</h2>
  </template>
</men-bizning-komponent>

Scoped Slots: Bolalar komponenti, slot orqali ota komponentga ma'lumotlarni uzatishi mumkin. Ota komponent, bu ma'lumotlarni slotni render qilishda ishlatishi mumkin.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

Foydalanish:

<men-rolista :items="['Olma', 'Banan', 'Apelsin']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</men-rolista>

slotProps ning destrukturasi:

<men-rolista :items="['Olma', 'Banan', 'Apelsin']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destrukturatsiya)
  </template>
</men-rolista>

Slotlar, bolalar komponentining shablonida "joylar" yaratib, ota komponentga o'z kontentini joylashtirish imkonini beradi. Render jarayonida Vue <slot> (yoki <slot name="...">) tegini, ota komponent tomonidan taqdim etilgan kontent bilan almashtiradi. Scoped slotlar uchun, bolalar komponentidan kelgan ma'lumotlar, ota komponentdagi slot shablonining argument ob'ekti orqali mavjud bo'ladi.

Vue-də slotlar nə üçün istifadə olunur və necə işləyirlər?