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-ում սլոտները ինչու են օգտագործվում և ինչպես են աշխատում?