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

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

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

Εκπέμπει γεγονότα από ένα παιδί στον γονέα του

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

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

instagram viewer

Για παράδειγμα, φανταστείτε ένα στοιχείο κουμπιού με μια συνάρτηση που επιστρέφει μια τιμή σε κάθε κλικ. Θα χρειαστεί να εκπέμψετε αυτό το συμβάν στο γονικό στοιχείο για να επιτρέψετε στο γονικό στοιχείο να ενημερώσει την κατάστασή του ή να εκτελέσει μια ενέργεια με βάση την επιστρεφόμενη τιμή.

Σύμβαση ονομασίας για προσαρμοσμένα συμβάντα που εκπέμπονται στο Vue

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

Είναι πλέον καθιερωμένη πρακτική να ορίζετε τα προσαρμοσμένα συμβάντα σας σε θήκη κεμπάπ όταν εργάζεστε με πρότυπα HTML και CamelCase όταν εργάζεστε με JavaScript. Ωστόσο, μπορείτε να επιλέξετε να χρησιμοποιήσετε οποιαδήποτε επιλογή όταν εργάζεστε με JavaScript, καθώς το Vue συγκεντρώνει όλα τα προσαρμοσμένα συμβάντα πίσω στο kebab-case.

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

Πώς να εκπέμψετε προσαρμοσμένα συμβάντα από το παιδί στο γονικό στοιχείο

Υπάρχουν δύο τρόποι με τους οποίους μπορείτε να επιτύχετε την εκπομπή προσαρμοσμένων συμβάντων στο Vue. Μπορείτε να εκπέμψετε προσαρμοσμένα συμβάντα ενσωματωμένα (απευθείας στο πρότυπο Vue) με το $emit μέθοδο που παρέχει το Vue. Μπορείτε επίσης να χρησιμοποιήσετε το defineEmits μακροεντολή διαθέσιμη από το Vue 3.

Εκπομπή προσαρμοσμένων συμβάντων στο Vue με τη μέθοδο $emit

$emit, μια ενσωματωμένη μέθοδος Vue, επιτρέπει σε ένα θυγατρικό στοιχείο να στείλει ένα συμβάν στο γονικό του στοιχείο. Καλείτε αυτήν τη μέθοδο in-line (μέσα στο πρότυπο του θυγατρικού στοιχείου) για να ενεργοποιήσετε το προσαρμοσμένο συμβάν. Η μέθοδος $emit παίρνει δύο ορίσματα: το όνομα του συμβάντος που θέλετε να εκπέμψετε και ένα προαιρετικό ωφέλιμο φορτίο που μπορεί να μεταφέρει πρόσθετα δεδομένα.

Σκεφτείτε αυτό το θυγατρικό στοιχείο που εκπέμπει ένα συμβάν για να ειδοποιήσει το γονικό στοιχείο σχετικά με ένα κλικ κουμπιού:

 ChildComponent.vue 
<γραφήεγκατάσταση>
εισαγωγή { ref } από το 'vue';
const post = ref('')
γραφή>
<πρότυπο>
<div>
<εισαγωγήτύπος="κείμενο"v-μοντέλο="Θέση">
<κουμπίv-on: κλικ="$emit('κλικ με κουμπί', ανάρτηση)">Θέσηκουμπί>
div>
πρότυπο>

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

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

Το στοιχείο κουμπιού έχει μια οδηγία v-on που ακούει για συμβάντα κλικ στο κουμπί. Το κλικ στο κουμπί καλεί τη μέθοδο $emit με δύο ορίσματα: το όνομα συμβάντος, "κουμπί-κλικ" και την τιμή της μεταβλητής ανάρτησης.

Το γονικό στοιχείο μπορεί τώρα να ακούσει το προσαρμοσμένο συμβάν με την οδηγία v-on για χειρισμός εκδηλώσεων στο Vue:

 ParentComponent.vue 
εισαγωγή { ref } από το "vue";
Εισαγάγετε το ChildComponent από το "./components/ChildComponent.vue".
const postList = ref([])


const addPosts = (δημοσίευση) => {
 postList.value.push (ανάρτηση)
}
γραφή>
<πρότυπο>
<div>
<ChildComponent @κλικ στο κουμπί="προσθήκη αναρτήσεων"/>
<ul>
<liv-για="ανάρτηση στη λίστα αναρτήσεων">{{ Θέση }}li>
ul>
div>
πρότυπο>

Αυτό το μπλοκ κώδικα δείχνει ένα γονικό στοιχείο που εισάγει και χρησιμοποιεί το θυγατρικό στοιχείο από πριν. Το μητρικό στοιχείο ορίζει α postList μεταβλητή πίνακα ως αντιδραστική αναφορά. Το συστατικό στη συνέχεια ορίζει ένα addPosts λειτουργία που εκτελείται, λαμβάνοντας α Θέση διαφωνία. Η συνάρτηση προσθέτει μια νέα ανάρτηση στον πίνακα postList με το Σπρώξτε() μέθοδος.

ο @button-κλικ Το πρόγραμμα ακρόασης συμβάντος καταγράφει το προσαρμοσμένο συμβάν το ChildComponent εκπέμπεται όταν κάνετε κλικ στο κουμπί. Αυτό το συμβάν προκαλεί την εκτέλεση της συνάρτησης addPosts. Τέλος, το μπλοκ κώδικα επισυνάπτει το v-για οδηγία για απόδοση λιστών στο Vue στο στοιχείο ul για επανάληψη πάνω από τον πίνακα postList.

Εκπομπή συμβάντων Με τη μακροεντολή defineEmits

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

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε τη μακροεντολή defineEmits και να την καλέσετε στο στοιχείο θυγατρικού σας:

 ChildComponent.vue 
<γραφήεγκατάσταση>
εισαγωγή { ref } από το "vue";
const emit = defineEmits(["κουμπί-κλικ"]);


const post = ref("");


κουμπί constΚλικ = () => {
 emit("κουμπί-κλικ", post.value);
};
γραφή>
<πρότυπο>
<div>
<εισαγωγήτύπος="κείμενο"v-μοντέλο="Θέση" />
<κουμπίv-on: κλικ="buttonClick">Θέσηκουμπί>
div>
πρότυπο>

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

Σε αυτό το μπλοκ κώδικα, το defineEmits μακροεντολή ορίζει το κλικ στο κουμπί Εκδήλωση. Με την κλήση αυτής της μακροεντολής, το μπλοκ κώδικα επιστρέφει μια συνάρτηση $emit, επιτρέποντάς σας να εκπέμπετε τα καθορισμένα συμβάντα. Ο πίνακας που μεταβιβάζεται στη μακροεντολή defineEmits εντός του στοιχείου θα περιέχει όλα τα συμβάντα που πρέπει να εκπέμψετε στο γονικό στοιχείο.

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

Το στοιχείο κουμπιού έχει α v-on: κλικ οδηγία που ενεργοποιεί τη λειτουργία buttonClick. Το γονικό στοιχείο μπορεί στη συνέχεια να χρησιμοποιήσει το θυγατρικό στοιχείο με τον ίδιο τρόπο που έκανε με τη μέθοδο $emit.

Οι προγραμματιστές Vue επωφελούνται από μια αρχιτεκτονική που βασίζεται σε στοιχεία

Μπορείτε να επικοινωνήσετε από ένα θυγατρικό στοιχείο στον γονέα του εκπέμποντας συμβάντα χρησιμοποιώντας τη μέθοδο $emit και τη μακροεντολή defineEmits.

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