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 სლოტებში, მონაცემები ხელმისაწვდომია შვილობილი კომპონენტიდან სლოტის შაბლონის არგუმენტის ობიექტის მეშვეობით.