Vue js da Slot lar

Vue js da asosan uch xil slot turlari mavjud:

1. Oddiy slotlar (default slots)

2. Nomlangan slotlar (named slots)

3. Scoped slotlar

Keling, har birini batafsil ko'rib chiqaylik:

1. Oddiy slotlar (default slots):
Oddiy slotlar eng sodda turdagi slotlardir. Ular ota-komponentdan bola-komponentga kontent uzatish uchun ishlatiladi.

<!-- Bola-komponent -->
<template>
  <div>
    <h2>Bola-komponent</h2>
    <slot></slot>
  </div>
</template>

<!-- Ota-komponent -->
<template>
  <bola-komponent>
    <p>Bu oddiy slot orqali uzatilgan kontent</p>
  </bola-komponent>
</template>

2. Nomlangan slotlar (named slots):
Nomlangan slotlar bir nechta slotlarni bir komponentda ishlatish imkonini beradi. Har bir slot o'zining nomi bilan aniqlanadi.

<!-- Bola-komponent -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- Ota-komponent -->
<template>
  <bola-komponent>
    <template #header>
      <h1>header</h1>
    </template>
    
    <p>Asosiy kontent</p>
    
    <template #footer>
      <p>footer</p>
    </template>
  </bola-komponent>
</template>

3. Scoped slotlar:
Scoped slotlar bola-komponentdan ota-komponentga ma'lumot uzatish imkonini beradi. Bu juda foydali, chunki u ota-komponentga bola-komponentning ichki holatiga asoslangan holda kontent yaratish imkonini beradi.

<script setup>
const items = [{
    id: 1,
    text: 'Birinchi element'
  },
  {
    id: 2,
    text: 'Ikkinchi element'
  },
  {
    id: 3,
    text: 'Uchinchi element'
  }]
</script>

<!-- Bola-komponent -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item">
        <!-- Standart kontent -->
        {{ item.text }}
      </slot>
    </li>
  </ul>
</template>

<!-- Ota kontent -->
<template>
  <bola-komponent>
    <template v-slot:default="slotProps">
      <strong>{{ slotProps.item.id }}:</strong> {{ slotProps.item.text }}
    </template>
  </bola-komponent>
</template>

Bu misolda, bola-komponent o'zining items ma'lumotlarini ota-komponentga uzatadi, va ota-komponent bu ma'lumotlardan foydalanib, o'ziga xos tarzda ro'yxat elementlarini ko'rsatadi.

Slotlar Vue-da komponentlarni juda moslashuvchan qilish uchun kuchli vositadir. Ular yordamida siz komponentlarning tarkibini osongina boshqarish va ularni turli vaziyatlarga moslashtirishi mumkin.

https://t.me/shahzodcodes