Uzziniet, kā uz notikumiem balstīts modelis var palīdzēt pārsūtīt datus starp komponentiem.
Tīmekļa lietojumprogrammu strukturēšana, izmantojot komponentu arhitektūru, ļauj viegli izveidot un uzturēt lietojumprogrammu.
Pielāgotu notikumu izstarošana ir viens no veidiem, kā varat pārvaldīt saziņu starp komponentiem; rekvizīti un sloti ir divi citi. Pielāgoti notikumi ļauj nosūtīt datus no bērna uz vecāku komponentu.
Izsūtiet notikumus no bērna uz tā vecākiem
Vue piedāvā daudz iespēju sazināties starp komponentiem. Viens nozīmīgs veids, kā Komunikācija starp komponentiem notiek, izmantojot rekvizītus. Rekvizīti ļauj nosūtīt datus no vecākiem uz bērna komponentiem.
Kas tad notiek, ja vēlaties nosūtīt datus no bērna uz vecāku komponentu? Vue ļauj izstarot pielāgotus notikumus no bērna uz vecāku komponentiem. Šis process ļauj vecākkomponentam izmantot datus un funkcijas no pakārtotā komponenta.
Piemēram, iedomājieties pogas komponentu ar funkciju, kas atgriež vērtību pēc katra klikšķa. Šis notikums būs jāizdod vecākkomponentam, lai ļautu vecākkomponentam atjaunināt savu stāvokli vai veikt darbību, pamatojoties uz atgriezto vērtību.
Nosaukšanas konvencija par pielāgotiem raidītiem notikumiem Vue
Pirms izpētīt pielāgotu notikumu izstarošanu, jums ir jāsaprot Vue pielāgoto notikumu nosaukumi. Pirms Vue 3 parādīšanās izstrādātājiem bija stingri jādefinē pielāgoti notikumi ar kebaba kastīte, atdalot vārdus nosaukumos ar defisi.
Tagad ir ierasta prakse definēt savus pielāgotos notikumus kebaba kastē, strādājot ar HTML veidnēm, un kamieļa futrālis strādājot ar JavaScript. Tomēr, strādājot ar JavaScript, varat izvēlēties izmantot jebkuru opciju, jo Vue apkopo visus pielāgotos notikumus atpakaļ uz kebabu.
Izdodot pielāgotu notikumu, norādiet notikuma mērķi ar aprakstošu nosaukumu. Tas ir ļoti svarīgi, jo īpaši, ja strādājat komandā, lai skaidri noteiktu pasākuma mērķi.
Kā nosūtīt pielāgotus notikumus no bērna uz vecāku komponentu
Ir divi veidi, kā pakalpojumā Vue var izstarot pielāgotus notikumus. Varat raidīt pielāgotus notikumus iekļauti (tieši Vue veidnē), izmantojot $emit metode, ko nodrošina Vue. Varat arī izmantot defineEmits makro pieejams no Vue 3.
Pielāgotu notikumu izstarošana Vue, izmantojot $emit metodi
$emit, iebūvēta Vue metode, ļauj pakārtotajam komponentam nosūtīt notikumu savam vecākkomponentam. Lai aktivizētu pielāgoto notikumu, šī metode tiek izsaukta tieši (bērnkomponenta veidnē). Metodei $emit ir divi argumenti: notikuma nosaukums, kuru vēlaties izstarot, un izvēles lietderīgā slodze, kas var pārvadāt papildu datus.
Apsveriet šo pakārtoto komponentu, kas izstaro notikumu, lai informētu vecākkomponentu par pogas klikšķi:
ChildComponent.vue
<skriptsuzstādīt>
importēt { ref } no 'vue';const post = ref('')
skripts>
<veidne>
<div>
<ievadeveids="teksts"v-modelis="post">
<poguv-on: noklikšķiniet="$emit('button-clicked', post)">Postpogu>
div>
veidne>
Šis koda bloks parāda, kā izdalīt pielāgotu notikumu no pakārtota komponenta. Bērns sāk inicializējot pasta mainīgo ar tukšu virkni.
Pēc tam bērna komponents saista ievades elementu ar post mainīgo ar v-modeli, a Vu datu saistoša direktīva. Šī saistīšana ļauj veikt izmaiņas ievades laukā, lai automātiski atjauninātu ziņas mainīgo.
Pogas elementam ir v-on direktīva, kas uzklausa klikšķu notikumus uz pogas. Pogas klikšķis izsauc $emit metodi ar diviem argumentiem: notikuma nosaukumu, "pogas klikšķis" un ziņas mainīgā vērtību.
Vecāks komponents tagad var klausīties pielāgoto notikumu, izmantojot direktīvu v-on notikumu apstrāde Vue:
ParentComponent.vue
importēt { ref } no "vue";
importēt ChildComponent no "./components/ChildComponent.vue";const postList = ref([])
const addPosts = (post) => {
postList.value.push (post)
}
skripts>
<veidne>
<div>
<ChildComponent @noklikšķināja uz pogas="pievienot ziņas"/>
<ul>
<liv-par="post in post List">{{ post }}li>
ul>
div>
veidne>
Šis koda bloks parāda vecāku komponentu, kas importē un izmanto iepriekšējo pakārtoto komponentu. Vecākā komponents definē a ziņu saraksts masīva mainīgais kā reaktīva atsauce. Pēc tam komponents definē an pievienot ziņas funkcija, kas darbojas, ņemot a pastu arguments. Funkcija pievieno jaunu ziņu postList masīvam ar push () metodi.
The Noklikšķināts ar @pogu notikumu uztvērējs tver pielāgoto notikumu ChildComponent izstaro, noklikšķinot uz pogas. Šis notikums izraisa funkcijas addPosts palaišanu. Visbeidzot, koda bloks pievieno v-par direktīva par renderēšanas sarakstus Vue uz elementu ul, lai atkārtotu postList masīvu.
Notikumu emisija ar makro defineEmits
Vue 3 iepazīstināja ar defineEmits makro, kas skaidri definē notikumus, ko komponents var izstarot. Šis makro nodrošina tipam drošu veidu, kā emitēt notikumus, kas rada strukturētāku kodu bāzi.
Šeit ir piemērs tam, kā varat izmantot makro defineEmits un izsaukt to savā pakārtotajā komponentā:
ChildComponent.vue
<skriptsuzstādīt>
importēt { ref } no "vue";const emit = defineEmits(["noklikšķināja uz pogas"]);
const post = ref("");
const pogaNoklikšķiniet = () => {
emit("noklikšķināja uz pogas", post.value);
};
skripts>
<veidne>
<div>
<ievadeveids="teksts"v-modelis="post" />
<poguv-on: noklikšķiniet="buttonClick">Postpogu>
div>
veidne>
Lai gan funkcionalitāte paliek nemainīga, pastāv būtiskas atšķirības koda sintaksē starp iepriekš minēto koda bloku un bloku ar $emit funkciju.
Šajā koda blokā defineEmits makro definē noklikšķināja uz pogas notikumu. Izsaucot šo makro, koda bloks atgriež funkciju $emit, kas ļauj izstarot definētos notikumus. Masīvs, kas nodots makro defineEmits komponentā, saturēs visus notikumus, kas jums jāizstaro vecākkomponentam.
Tālāk koda bloks definē a pogaNoklikšķiniet funkciju. Šī funkcija izstaro notikumu, noklikšķinot uz pogas, un publicēšanas mainīgo vecākkomponentam. Pakārtotā komponenta veidņu blokā ir pogas elements.
Pogas elementam ir a v-on: noklikšķiniet direktīva, kas iedarbina poguClick funkciju. Pēc tam vecākais komponents var izmantot pakārtoto komponentu tāpat kā ar $emit metodi.
Vue izstrādātāji gūst labumu no uz komponentiem balstītas arhitektūras
Varat sazināties no pakārtotā komponenta ar tā vecāku, izdodot notikumus, izmantojot $emit metodi un makro defineEmits.
Varat gūt labumu no Vue komponentiem balstītās arhitektūras, jo tā ļauj rakstīt strukturētāku, kodolīgāku kodu. Izmantojot modernos JavaScript ietvarus, piemēram, Vue, varat izmantot Web Components — W3C tīmekļa standartu, lai izveidotu šo komponentu arhitektūru.
