Πώς λειτουργούν τα components και τα props στο Vue;

Question

Accepted Answer

**Τα components** είναι επαναχρησιμοποιήσιμα, αυτόνομα κομμάτια UI. **Τα props** είναι ο τρόπος που ένα γονικό component μεταδίδει δεδομένα *προς τα κάτω* σε ένα θυγατρικό — είναι τα πληκτρολογημένα, μόνο για ανάγνωση inputs του θυγατρικού. ## Ορισμός props στο θυγατρικό ```vue ``` ## Μετάδοση props από το γονικό ```vue ``` Προσέξτε τη διαφορά: `name="Ann"` μεταδίδει ένα κυριολεκτικό string, ενώ `:age="30"` (με `v-bind`) αξιολογεί μια έκφραση — απαραίτητο για αριθμούς, boolean, αντικείμενα ή μεταβλητές. Επίσης, σημειώστε ότι τα ονόματα props είναι `camelCase` σε JavaScript αλλά `kebab-case` στα templates (`isAdmin` → `:is-admin`). ## Τα props είναι μονόδρομα και μόνο για ανάγνωση ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Τα δεδομένα ρέουν **προς τα κάτω** (γονικό → θυγατρικό). Ένα θυγατρικό δεν πρέπει να τροποποιεί τα props του· αν χρειάζεται να αλλάξει κάτι, είτε χρησιμοποιεί ένα τοπικό αντίγραφο είτε **εκπέμπει ένα event** που ζητά από το γονικό να αλλάξει την πηγή ("props προς τα κάτω, events προς τα πάνω"). Αυτή η μονόδρομη ροή κρατά τα δεδομένα προβλέψιμα. ## TypeScript props ```vue ``` ## Γιατί έχει σημασία Τα components + props είναι το θεμέλιο της αρχιτεκτονικής Vue — συνθέτετε UI από επαναχρησιμοποιήσιμα components και τα διαμορφώνετε μέσω props. Η κατανόηση ότι τα props είναι **μονόδρομα και μόνο για ανάγνωση** (δεδομένα προς τα κάτω, events προς τα πάνω) είναι το βασικό νοητικό μοντέλο που κρατά τις Vue εφαρμογές προβλέψιμες· η τροποποίηση props ή η προσδοκία δύσδρομης ροής props είναι μια κλασική πηγή σφαλμάτων.