За какво служат слотовете във 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 и как работят?