Πώς να χρησιμοποιήσετε τα στηρίγματα για να δημιουργήσετε καλύτερα στοιχεία Vue

Ένα από τα βασικά χαρακτηριστικά του Vue είναι η αρθρωτή αρχιτεκτονική του, η οποία σας επιτρέπει να δημιουργείτε εφαρμογές ιστού συνδυάζοντας μικρά, επαναχρησιμοποιήσιμα στοιχεία. Αυτό σας επιτρέπει να ενημερώνετε και να διατηρείτε εύκολα την εφαρμογή ιστού σας.

Κάθε στοιχείο στο Vue μπορεί να έχει το δικό του σύνολο δεδομένων και μεθόδων, τις οποίες μπορείτε να μεταβιβάσετε στα θυγατρικά του στοιχεία με στηρίγματα. Εδώ, θα μάθετε πώς να χρησιμοποιείτε στηρίγματα στο Vue για να μεταβιβάζετε δεδομένα από γονικά σε θυγατρικά στοιχεία.

Τι είναι τα Props στο Vue;

Τα στηρίγματα - συντομογραφία των "ιδιοτήτων" - είναι προσαρμοσμένα χαρακτηριστικά στο Vue που ένα γονικό στοιχείο μπορεί να μεταβιβάσει στα θυγατρικά του στοιχεία.

Στο Vue, τα γονικά στοιχεία περνούν τα στηρίγματα στα θυγατρικά στοιχεία σε μια ροή μονής κατεύθυνσης. Αυτό σημαίνει ότι τα θυγατρικά στοιχεία μπορούν μόνο να διαβάσουν και να χρησιμοποιήσουν αυτά τα διαβιβασμένα στηρίγματα, αλλά δεν μπορούν να τροποποιήσουν τα δεδομένα.

Η χρήση των στηρίξεων σάς επιτρέπει να δημιουργήσετε επαναχρησιμοποιήσιμα στοιχεία που μπορείτε να εφαρμόσετε σε όλη την εφαρμογή σας. Τα στηρίγματα σας εξοικονομούν χρόνο και προσπάθεια, καθώς μπορείτε να επαναχρησιμοποιήσετε εξαρτήματα αντί να δημιουργήσετε νέα στοιχεία από την αρχή.

Πώς να περάσετε στηρίγματα στο Vue

Το να περάσεις στηρίγματα στο Vue είναι απλό και διαφορετικό από τον τρόπο που περνάς στηρίγματα στο React. Για να μεταβιβάσετε ένα στηρίγματα από ένα γονικό στοιχείο στο θυγατρικό του στοιχείο στο Vue, χρησιμοποιήστε την επιλογή props στο σενάριο του θυγατρικού στοιχείου.

Εδώ είναι ένα παράδειγμα:

 Το παιδί συστατικό 
<πρότυπο>
<div>
<h1>{{ τίτλος }}h1>
<Π>{{ μήνυμα }}Π>
<Π>{{ διεύθυνση ηλεκτρονικού ταχυδρομείου }}Π>
div>
πρότυπο>
<γραφή>
εξαγωγή προεπιλογή {
 όνομα: "ChildComponent",
 στηρίγματα: ["τίτλος", "μήνυμα", "διεύθυνση ηλεκτρονικού ταχυδρομείου"],
};
γραφή>

Το παραπάνω μπλοκ κώδικα περιγράφει ένα θυγατρικό στοιχείο Vue που χρησιμοποιεί στηρίγματα για τη μετάδοση δεδομένων από ένα γονικό στοιχείο. Το στοιχείο περιλαμβάνει τρία στοιχεία HTML που εμφανίζουν το τίτλος, μήνυμα, και διεύθυνση ηλεκτρονικού ταχυδρομείου ιδιότητες με παρεμβολή.

ο στηρίγματα Η επιλογή στο θυγατρικό στοιχείο λαμβάνει μια σειρά ιδιοτήτων. Αυτός ο πίνακας ορίζει τις ιδιότητες που δέχεται το θυγατρικό στοιχείο από το γονικό στοιχείο.

Ακολουθεί ένα παράδειγμα ενός γονικού στοιχείου Vue που μεταβιβάζει δεδομένα στο θυγατρικό στοιχείο με στηρίγματα:

 μητρικό συστατικό 
<πρότυπο>
<div>
<παιδί-συστατικό
 title="Hello World"
 message="Αυτό είναι ένα μήνυμα από το γονικό στοιχείο"
 emailAddress="[email protected]"
 />
div>
πρότυπο>
<γραφή>
Εισαγάγετε το ChildComponent από το "./components/ChildComponent.vue".
εξαγωγή προεπιλογή {
 όνομα: "ParentComponent",
 συστατικά: {
 ChildComponent,
 },
};
γραφή>

Το γονικό στοιχείο στο παραπάνω μπλοκ κώδικα μεταβιβάζει τρία στηρίγματα στο θυγατρικό στοιχείο. Το μπλοκ κώδικα μεταβιβάζει στατικές τιμές στο τίτλος, μήνυμα, και διεύθυνση ηλεκτρονικού ταχυδρομείου στηρίγματα.

Μπορείτε επίσης να μεταβιβάσετε δυναμικές τιμές στα στηρίγματα σας με το v-bind διευθυντικός. v-bind είναι οδηγία χρησιμοποιείται στο Vue για τη σύνδεση δεδομένων σε χαρακτηριστικά HTML.

Ακολουθεί ένα παράδειγμα του γονικού στοιχείου Vue που χρησιμοποιεί το v-bind οδηγία για τη μετάδοση δυναμικών τιμών στα στηρίγματα:

 μητρικό συστατικό 
<πρότυπο>
<div>
<παιδί-συστατικό
 :title= "τίτλος"
 :message= "μήνυμα"
 :emailAddress= "emailAddress"
 />
div>
πρότυπο>
<γραφή>
Εισαγάγετε το ChildComponent από το "./components/ChildComponent.vue".
εξαγωγή προεπιλογή {
 όνομα: "ParentComponent",
 συστατικά: {
 ChildComponent,
 },
 δεδομένα() {
 ΕΠΙΣΤΡΟΦΗ {
 τίτλος: "Καλώς ήρθες αγαπητέ",
 μήνυμα: "Πώς είσαι",
 Διεύθυνση ηλεκτρονικού ταχυδρομείου: "[email protected]",
 };
 },
};
γραφή>

Χρησιμοποιώντας την v-bind οδηγία για τη διαβίβαση δεδομένων στο θυγατρικό στοιχείο, μπορείτε να ενημερώσετε τις τιμές των στηρίξεων με βάση την κατάσταση του γονικού στοιχείου. Για παράδειγμα, αλλάζοντας το τίτλος ιδιότητα δεδομένων στο μητρικό στοιχείο, το τίτλος Το prop που μεταβιβάστηκε στο θυγατρικό στοιχείο θα ενημερωθεί επίσης.

Αυτή η μέθοδος ορισμού των στηρίξεων ως συστοιχίας χορδών είναι ένα μοτίβο στενογραφίας. Κάθε μία από τις συμβολοσειρές στον πίνακα αντιπροσωπεύει ένα υποστήριγμα. Αυτή η μέθοδος είναι ιδανική όταν όλα τα στηρίγματα στον πίνακα έχουν τα ίδια Τύπος δεδομένων JavaScript.

Ορισμός του Props ως αντικείμενο στο Vue

Ο ορισμός των στηρίξεων ως αντικειμένου JavaScript αντί για πίνακα επιτρέπει την καλύτερη προσαρμογή κάθε στηρίγματος. Ο ορισμός των στηρίξεων ως αντικειμένου σε ένα στοιχείο θα σας επιτρέψει να καθορίσετε τον αναμενόμενο τύπο δεδομένων και την προεπιλεγμένη τιμή κάθε υποστηρίγματος.

Επιπλέον, μπορείτε να επισημάνετε συγκεκριμένα στηρίγματα όπως απαιτείται, ενεργοποιώντας μια προειδοποίηση εάν το στηρίγμα δεν παρέχεται όταν το εξάρτημα χρησιμοποιείται. Ο ορισμός των στηρίξεων ως αντικείμενο προσφέρει πολλά πλεονεκτήματα σε σχέση με τον ορισμό των στηρίξεων ως συστοιχίας, όπως:

1. Ο καθορισμός του αναμενόμενου τύπου δεδομένων και της προεπιλεγμένης τιμής για κάθε υποστήριγμα διευκολύνει εσάς και την ομάδα προγραμματιστή σας να κατανοήσετε πώς ακριβώς να χρησιμοποιήσετε το στοιχείο.
2. Επισημάνοντας τα στηρίγματα ως απαιτούμενα, μπορείτε να εντοπίσετε σφάλματα νωρίς στη διαδικασία ανάπτυξης και να παρέχετε περισσότερες πληροφορίες στην ομάδα προγραμματιστών.

Ακολουθεί ένα παράδειγμα πώς να ορίσετε τα props ως αντικείμενο σε ένα στοιχείο Vue.js:

<πρότυπο>
<div>
<h1>{{ τίτλος }}h1>
<Π>{{ μήνυμα }}Π>
<Π>{{ διεύθυνση ηλεκτρονικού ταχυδρομείου }}Π>
div>
πρότυπο>
<γραφή>
εξαγωγή προεπιλογή {
 όνομα: "ChildComponent",
 στηρίγματα: {
 τίτλος: {
 τύπος: String,
 προεπιλογή: "Προεπιλεγμένος τίτλος",
 },
 μήνυμα: {
 τύπος: String,
 προεπιλογή: "Προεπιλεγμένο μήνυμα",
 },
 διεύθυνση ηλεκτρονικού ταχυδρομείου: {
 τύπος: String,
 απαιτείται: αληθές,
 },
 },
};
γραφή>

Αυτό το μπλοκ κώδικα είναι ένα παράδειγμα ενός στοιχείου Vue.js που χρησιμοποιεί στηρίγματα για να μεταβιβάσει δεδομένα από ένα γονικό στοιχείο σε ένα θυγατρικό στοιχείο. Το μπλοκ κώδικα ορίζει αυτά τα στηρίγματα ως αντικείμενα με τύπο και προεπιλεγμένη τιμή ή απαιτούμενη σημαία.

Το μπλοκ κώδικα ορίζει το τίτλος και μήνυμα στηρίγματα ως χορδές με α Προκαθορισμένο αξία και το διεύθυνση ηλεκτρονικού ταχυδρομείου στήριγμα ως α απαιτείται σειρά.

Επιλέξτε την καλύτερη μέθοδο που ταιριάζει στην εφαρμογή Vue σας

Έχετε μάθει πώς να ορίζετε τα στηρίγματα τόσο ως πίνακα όσο και ως αντικείμενο. Η προτίμησή σας θα πρέπει να ταιριάζει στις συγκεκριμένες ανάγκες της εφαρμογής σας.

Το Vue αποδεικνύεται ως ένα πολύ ευέλικτο πλαίσιο JavaScript. Προσφέρει πολλές μεθόδους και επιλογές για την επίτευξη του ίδιου στόχου με διαφορετικά πλεονεκτήματα για οποιαδήποτε από τις επιλογές ή μεθόδους με τις οποίες επιλέγετε να εργαστείτε.