Middle

Zašto se koriste slotovi u Vue i kako oni funkcionišu?

sobes.tech АИ

Одговор од АИ

U Vue-u se koriste slotovi za ugrađivanje sadržaja iz spoljašnjih komponenti. To omogućava kreiranje fleksibilnih i ponovo upotrebljivih komponenti.

Postoje tri tipa slotova:

Podrazumevani (Default Slots): Koriste se za umetanje osnovnog sadržaja.

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

Upotreba:

<my-component>
  <p>Ovaj sadržaj će biti umetnut u podrazumevani slot.</p>
</my-component>

Imenski slotovi (Named Slots): Omogućavaju umetanje sadržaja u specifične slotove unutar komponente, razlikujući se po imenu.

<template>
  <div>
    <slot name="header"></slot>
    <div>Osnovni sadržaj komponente</div>
    <slot name="footer"></slot>
  </div>
</template>

Upotreba:

<my-component>
  <template v-slot:header>
    <h2>Naslov</h2>
  </template>
  <template v-slot:footer>
    <p>Futer</p>
  </template>
</my-component>

Skraćeni sintaks za v-slot:

<my-component>
  <template #header>
    <h2>Naslov (skraćeni sintaks)</h2>
  </template>
</my-component>

Scoped slotovi (Scoped Slots): Omogućavaju da dete komponenta prosledi podatke roditeljskoj komponenti putem slot-a. Roditeljski komponenta može koristiti te podatke pri renderovanju sadržaja slot-a.

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

Upotreba:

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

Destrukturiranje slotProps:

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

Slotovi rade tako što stvaraju "mesta" unutar šablona deteta komponente, gde roditelj može umetnuti svoj sadržaj. Pri renderovanju, Vue zamenjuje <slot> (ili <slot name="...">) sa sadržajem koji je obezbedio roditelj. Kod scoped slotova, podaci iz deteta su dostupni putem objekta argumenta šablona slot-a u roditeljskoj komponenti.

Претходно Следеће