Vueдеги слоттор эмне үчүн колдонулат жана алар кандай…

Vue ичинде слоттор сырттан контентти киргизүү үчүн колдонулат. Бул ийкемдүү жана кайра колдонулучу компоненттерди түзүүгө мүмкүндүк берет.

Үч түрдүү слот бар:

Өзүнчө (Default Slots): Негизги мазмунду кошуу үчүн колдонулат.

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

Колдонуу:

<my-component>
  <p>Бул мазмун өзүнчө слотко кошулат.</p>
</my-component>

Аты менен слоттор (Named Slots): Компоненттин ичинде белгилүү слотторго мазмунду кошууга мүмкүндүк берет, аталышына жараша айырмаланат.

<template>
  <div>
    <slot name="header"></slot>
    <div>Негизги мазмун</div>
    <slot name="footer"></slot>
  </div>
</template>

Колдонуу:

<my-component>
  <template v-slot:header>
    <h2>Титул</h2>
  </template>
  <template v-slot:footer>
    <p>Аяк</p>
  </template>
</my-component>

v-slot кыска синтаксиси:

<my-component>
  <template #header>
    <h2>Титул (кыска синтаксис)</h2>
  </template>
</my-component>

Scoped слоттор (Scoped Slots): Баланын компонентине слот аркылуу ата-энесине маалымат берүү мүмкүнчүлүгү. Ата-эне бул маалыматтарды слоттун шаблонунда колдонуп, мазмунду түзөт.

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

Колдонуу:

<my-list :items="['Apple', 'Banana', 'Orange']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</my-list>

slotProps деструктуризациясы:

<my-list :items="['Apple', 'Banana', 'Orange']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Деструктуризация)
  </template>
</my-list>

Слоттор шаблондун ичинде "орундар" түзүп, ата-эне өзүнүн мазмунун кошо алат. Рендеринг учурунда Vue <slot> (же <slot name="...">) тегин ата-энеден келген мазмун менен алмаштырат. Scoped слоттордо, маалыматтар баланын компонентинен слот шаблонунун аргумент объектинен жеткиликтүү болот.

Vueдеги слоттор эмне үчүн колдонулат жана алар кандай иштейт?