Vue.js ir daudzpusīgs un pilnvērtīgs ietvars milzīgu tīmekļa lietojumprogrammu veidošanai. Jebkura tīmekļa lietojumprogramma ir sadalīta komponentos. Piemēram, vienkārša vietne, kas ietver galveni, sānjoslu un dažus citus komponentus. Lai pārvaldītu un apstrādātu šo komponentu balstīto pieeju, Vue.js piedāvā vecāku un bērnu attiecības starp komponentiem un, ja mēs vēlamies nosūtīt dažus datus pāri komponentiem. Vue.js piedāvā rekvizītus nosūtīt datus no vecākiem uz bērna sastāvdaļu, bet nosūtīt datus no bērna vecākiem; mums ir jāizlaiž pasūtījuma pasākumi. Šajā rakstā mēs uzzinām par šaušanu un pielāgotu notikumu klausīšanos.Pirmkārt, redzēsim, kā aktivizēt pielāgotu notikumu Vue.js un tad kā klausīties šo notikumu. Sintakse notikuma aktivizēšanai Vue.js ir
šo.$ emit ('eventName')Šajā sintaksē mums jābūt uzmanīgiem, piešķirot notikumam nosaukumu, jo tiek izmantots tas pats nosaukums; mēs vēlāk klausīsimies šo notikumu. Lai noklausītos šo notikumu, mēs to varam klausīties, noklausoties klikšķu notikumu Vue.js. Piemēram
Mēs varam ierakstīt jebkuru izteicienu apgrieztajos komatos, kā arī funkciju. Tāpēc izmēģināsim piemēru, lai to labāk saprastu.
Piemērs
Pieņemsim, ka mums ir komponents ar nosaukumu “parentComponent”, kas tajā ietver bērnu komponentu ar nosaukumu “childComponent”, kuram mēs nosūtām ziņojumu, izmantojot rekvizītus.
Vecāku sastāvdaļa
Bērna sastāvdaļa
Bērna komponentā mēs iegūstam rekvizītus un parādām ziņojumu tagā “p”.
msg
Tagad pēc šo divu komponentu iestatīšanas. Sasveicināsimies ar mūsu ParentComponent. Lai sasveicinātos, mēs vispirms izveidosim pogu, un, noklikšķinot uz šīs pogas, mēs izsauksim funkciju “helloBack”. Pēc pogas izveides bērna komponentes HTML būtu šāds
ziņa
Izveidosim funkciju “helloBackFunc” arī metožu objektā. Kurā mēs emitēsim “helloBackEvent” kopā ar “helloBackVar” mainīgo, kas satur virkni “Hello Parent”. Pēc funkcijas izveidošanas pakārtotā komponenta javascript būtu šāds
Mēs esam paveikuši ar pasākuma atlaišanu. Tagad pārejam uz vecāku komponentu, lai klausītos notikumu.
Vecāku komponentā mēs varam vienkārši klausīties notikumu, tāpat kā mēs noklausāmies klikšķu notikumu. Mēs vienkārši noklausīsimies notikumu ChildComponent tagā un izsauksim tajā funkciju “thanks ()”.
Pateicības funkcijā mēs piešķirsim nodoto virkni mainīgajam ar nosaukumu “thanksMessage”. Pēc funkcijas izveidošanas un nodotās virknes piešķiršanas mainīgajam “parentComponent” javascript būtu šāds
Un saistiet veidnē mainīgo “thanksMessage”, lai redzētu, vai tas darbojas, vai nē.
Vecāku sastāvdaļa
thanksMessage
Bērna sastāvdaļa
Kad esat izveidojis un uzrakstījis visu šo kodu, dodieties uz tīmekļa lapu un atkārtoti ielādējiet to, lai iegūtu jaunākās funkcijas.
Mēs varam redzēt, ka rekvizīti tiek veiksmīgi nodoti bērna komponentam. Tagad, ja mēs noklikšķināsim uz pogas, kas faktiski atrodas bērna komponentā. Pateicības ziņojums jāparāda tūlīt pēc vecāka komponenta virsraksta.
Kā redzat, tas tiek parādīts.
Tātad, šādi mēs varam izstarot vai aktivizēt pielāgotos notikumus un klausīties tos kādā citā Vue komponentā.js.
Kopsavilkums
Šajā rakstā mēs esam iemācījušies izstarot pielāgotus notikumus Vue.js. Šajā rakstā ir soli pa solim pareizs piemērs, lai to saprastu, kā arī īss paskaidrojums. Tātad, mēs ceram, ka šis raksts palīdz iegūt labākus un skaidrākus pielāgotu notikumu izstarošanas jēdzienus Vue.js. Lai iegūtu vairāk šāda noderīga satura, turpiniet apmeklēt linuxhint.com