Milleks kasutatakse Vue-s slotte ja kuidas need…

Vue-slotid kasutatakse sisu sisestamiseks välistest komponentidest. See võimaldab luua paindlikke ja taaskasutatavaid komponente.

On kolm sloti tüüpi:

Vaikimisi (Default Slots): kasutatakse põhisisu sisestamiseks.

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

Kasutamine:

<my-component>
  <p>Seda sisu sisestatakse vaikimisi sloti.</p>
</my-component>

Nimetatud slotid (Named Slots): võimaldavad sisestada sisu konkreetsetesse komponenti slotidesse, mis erinevad nime järgi.

<template>
  <div>
    <slot name="header"></slot>
    <div>Põhisisu komponendis</div>
    <slot name="footer"></slot>
  </div>
</template>

Kasutamine:

<my-component>
  <template v-slot:header>
    <h2>Pealkiri</h2>
  </template>
  <template v-slot:footer>
    <p>Jalus</p>
  </template>
</my-component>

Lühisüntaks v-slot:

<my-component>
  <template #header>
    <h2>Pealkiri (lühisüntaks)</h2>
  </template>
</my-component>

Scoped slotid: võimaldavad lapsekomponentidel edastada andmeid vanemale sloti kaudu. Vanem saab neid andmeid kasutada sloti renderdamisel.

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

Kasutamine:

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

slotProps destruktureerimine:

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

Slotid toimivad nagu "kohad" komponendi mallis, kuhu vanem saab sisestada oma sisu. Rendeerimise ajal asendab Vue <slot> (või <slot name="...">) märgise vanema pakutud sisuga. Scoped slotide puhul on andmed lapsekomponentist kättesaadavad sloti mallis oleva argumentide objekti kaudu.

Milleks kasutatakse Vue-s slotte ja kuidas need töötavad?