Middle

Για ποιο λόγο χρησιμοποιούνται οι slots στο Vue και πώς λειτουργούν;

sobes.tech AI

Απάντηση από AI

Τα slots στο Vue χρησιμοποιούνται για την εισαγωγή περιεχομένου από έξω σε components. Αυτό επιτρέπει τη δημιουργία ευέλικτων και επαναχρησιμοποιήσιμων components.

Υπάρχουν τρεις τύποι slots:

Default Slots: Χρησιμοποιούνται για την εισαγωγή βασικού περιεχομένου.

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

Χρήση:

<το-δικόμου>
  <p>Αυτό το περιεχόμενο θα εισαχθεί στο default slot.</p>
</το-δικόμου>

Ονομασμένα slots: Επιτρέπουν την εισαγωγή περιεχομένου σε συγκεκριμένα slots μέσα στο component, διακριτά με το όνομά τους.

<template>
  <div>
    <slot name="header"></slot>
    <div>Κύριο περιεχόμενο του component</div>
    <slot name="footer"></slot>
  </div>
</template>

Χρήση:

<το-δικόμου>
  <template v-slot:header>
    <h2>Τίτλος</h2>
  </template>
  <template v-slot:footer>
    <p>Υποσέλιδο</p>
  </template>
</το-δικόμου>

Συντομευμένη σύνταξη για v-slot:

<το-δικόμου>
  <template #header>
    <h2>Τίτλος (συντομευμένη σύνταξη)</h2>
  </template>
</το-δικόμου>

Scoped Slots: Επιτρέπουν στο child component να μεταφέρει δεδομένα στο parent component μέσω του slot. Ο γονέας μπορεί να χρησιμοποιήσει αυτά τα δεδομένα κατά το render του περιεχομένου του slot.

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

Χρήση:

<η-λίστα-μου :items="['Μήλο', 'Μπανάνα', 'Πορτοκάλι']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</η-λίστα-μου>

Αποδόμηση slotProps:

<η-λίστα-μου :items="['Μήλο', 'Μπανάνα', 'Πορτοκάλι']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Αποδόμηση)
  </template>
</η-λίστα-μου>

Τα slots λειτουργούν δημιουργώντας "χώρους" μέσα στο πρότυπο του child component, όπου ο γονέας μπορεί να εισάγει το δικό του περιεχόμενο. Κατά το render, το Vue αντικαθιστά το <slot> (ή <slot name="...">) με το περιεχόμενο που παρέχεται από το parent component. Στα scoped slots, τα δεδομένα από το child component είναι διαθέσιμα μέσω του αντικειμένου των επιχειρημάτων του template του slot στο parent component.

Προηγούμενος Επόμενο