Τι είναι slots και scoped slots;

Question

Accepted Answer

**Slots** επιτρέπουν σε ένα parent να περάσει **template content** σε ένα child component — είναι ο τρόπος με τον οποίο κτίζεις ευέλικτα, επαναχρησιμοποιήσιμα wrappers (cards, modals, layouts) όπου ο consumer ελέγχει το εσωτερικό markup. ## Basic slot ```vue ``` ```vue

Title

Any content!

``` Το child ορίζει μια "τρύπα" (``), το parent την γεμίζει με whatever markup θέλει. Αυτό είναι πολύ πιο ευέλικτο από το να περνάς strings μέσω props. ## Named slots — πολλαπλά σημεία εισαγωγής ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — το child περνάει δεδομένα ΠΡΟ το slot content Μερικές φορές το child έχει δεδομένα που το parent's slot χρειάζεται (π.χ. κάθε item σε μια list). **Scoped slots** εκθέτουν δεδομένα από το child στο parent's template: ```vue ``` ```vue ``` Τα scoped slots είναι το κλειδί για **renderless/headless components**: το child διαχειρίζεται τη logic (looping, fetching, state) και αφήνει το parent να ελέγχει πλήρως την παρουσίαση. ## Γιατί έχει σημασία Τα slots είναι ο μηχανισμός content-distribution του Vue — απαραίτητα για reusable layout και wrapper components. Τα named slots παρέχουν πολλαπλά σημεία εισαγωγής, και τα scoped slots (εκθέοντας child data στο parent-defined templates) ενεργοποιούν ισχυρά patterns όπως headless components και customizable lists/tables. Αυτά είναι αυτά που κάνουν τα Vue components compositional αντί για rigid.