Vue'da slotlar nima uchun ishlatiladi va ular qanday…

Vue'da slotlar tashqi 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:

<moy-komponent>
  <p>Ushbu kontent default slotga joylashtiriladi.</p>
</moy-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:

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

v-slot uchun qisqartma sintaksisi:

<moy-komponent>
  <template #header>
    <h2>Sarlavha (qisqartma sintaksis)</h2>
  </template>
</moy-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-list :items="['Olma', 'Banana', 'Apelsin']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</men-list>

slotProps ning destrukturasi:

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

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'da slotlar nima uchun ishlatiladi va ular qanday ishlaydi?