Phenquestions
Vue.js este un cadru versatil și complet pentru crearea de aplicații web uriașe. Orice aplicație web este împărțită în componente. De exemplu, un site web simplu care include un antet, bara laterală și alte componente. Pentru a gestiona și gestiona această abordare bazată pe componente, Vue.js oferă relația părinte-copil între componente și dacă dorim să trimitem niște date între componente. Vue.js oferă accesorii pentru a trimite date de la părinte la o componentă copil, dar pentru a trimite date de la copil către părinte; trebuie să emitem evenimente personalizate. În acest articol, aflăm despre declanșarea și ascultarea evenimentelor personalizate.În primul rând, să vedem cum să declanșăm un eveniment personalizat în Vue.js și apoi cum să ascultați acel eveniment. Sintaxa pentru declanșarea unui eveniment în Vue.js este
acest.$ emit ('eventName')În această sintaxă, trebuie să fim atenți în timp ce dăm un nume evenimentului, deoarece folosind același nume; vom asculta ulterior acest eveniment. Pentru a asculta acest eveniment, îl putem asculta pe măsură ce ascultăm un eveniment cu clic în Vue.js. De exemplu
Putem scrie orice expresie în virgule inversate, precum și o funcție. Deci, să încercăm un exemplu pentru a-l înțelege mai bine.
Exemplu
Să presupunem că avem o componentă numită „părinteComponent”, care include o componentă copil în ea cu numele de „copilComponent” căreia îi transmitem un mesaj folosind elemente de recuzită.
Componenta părinte
Componenta copil
În Componenta copil, primim recuzită și afișăm mesajul în eticheta „p”.
msg
Acum, după ce ați configurat aceste două componente. Să salutăm înapoi la ParentComponent. Pentru a saluta înapoi, vom crea mai întâi un buton și, făcând clic pe butonul respectiv, vom apela funcția „helloBack”. După crearea butonului, HTML-ul componentei copil ar fi astfel
mesaj
Să creăm funcția „helloBackFunc” și în obiectul metode. În care vom emite „helloBackEvent” împreună cu o variabilă „helloBackVar” care conține șirul „Hello Parent”. După crearea unei funcții, javascriptul componentei copil ar fi astfel
Am terminat cu declanșarea evenimentului. Acum, să trecem la componenta părinte pentru a asculta evenimentul.
În componenta părinte, putem asculta pur și simplu evenimentul, la fel cum ascultăm evenimentul de clic. Vom asculta pur și simplu evenimentul în eticheta ChildComponent și vom apela funcția „mulțumiri ()” de pe acesta.
În funcția de mulțumire, vom atribui șirul trecut variabilei numite „thanksMessage”. După crearea funcției și atribuirea șirului trecut variabilei, javascriptul „părinteComponent” ar fi astfel
Și legați variabila „thanksMessage” în șablon undeva pentru a vedea dacă funcționează sau nu.
Componenta părinte
thanksMessage
Componenta copil
După crearea și scrierea acestui cod, accesați pagina web și reîncărcați-o pentru a obține cele mai recente funcționalități.
Putem vedea că recuzita este transmisă cu succes către componenta copil. Acum, dacă facem clic pe butonul, care este de fapt în componenta copil. Mesajul de mulțumire ar trebui să fie afișat imediat după titlul component părinte.
După cum puteți vedea, este afișat.
Deci, iată cum putem emite sau declanșa evenimente personalizate și le putem asculta în altă componentă din Vue.js.
rezumat
În acest articol, am învățat să emitem evenimente personalizate în Vue.js. Acest articol conține un exemplu adecvat pas cu pas pentru a-l înțelege cu o scurtă explicație împreună cu acesta. Așadar, sperăm că acest articol vă va ajuta să aveți concepte mai bune și clare de a emite evenimente personalizate în Vue.js. Pentru mai mult conținut atât de util, continuați să vizitați linuxhint.com
