Phenquestions
Vue.js on monipuolinen ja täysimittainen kehys valtavien verkkosovellusten rakentamiseen. Kaikki verkkosovellukset on jaettu komponentteihin. Esimerkiksi yksinkertainen verkkosivusto, joka sisältää otsikon, sivupalkin ja joitain muita komponentteja. Tämän komponenttipohjaisen lähestymistavan hallitsemiseksi ja käsittelemiseksi Vue.js tarjoaa vanhemman ja lapsen välisen suhteen komponenttien välillä ja jos haluamme lähettää tietoja komponenttien välillä. Vue.js tarjoaa ehdotuksia tietojen lähettämisestä vanhemmalta lapsikomponentille, mutta tietojen lähettäminen lapselta vanhemmalle; meidän on lähetettävä mukautettuja tapahtumia. Tässä artikkelissa kerrotaan ampumisesta ja mukautettujen tapahtumien kuuntelusta.Ensinnäkin, katsotaanpa, kuinka käynnistää mukautettu tapahtuma Vue.js ja sitten kuinka kuunnella tapahtumaa. Syntaksi tapahtuman käynnistämiseen Vue-sivustossa.js on
Tämä.$ emit ('eventName')Tässä syntaksissa meidän on oltava varovaisia, kun annamme tapahtumalle nimen, koska käytämme samaa nimeä; kuuntelemme myöhemmin tätä tapahtumaa. Tämän tapahtuman kuuntelemiseksi voimme kuunnella sitä kuunnellessamme klikkaustapahtumaa Vueessa.js. Esimerkiksi
Voimme kirjoittaa minkä tahansa lausekkeen käänteisiin pilkuihin sekä funktion. Joten kokeillaan esimerkkiä sen ymmärtämiseksi paremmin.
Esimerkki
Oletetaan, että meillä on komponentti nimeltä "parentComponent", joka sisältää alikomponentin nimellä "childComponent", jolle välitämme viestin rekvisiittaa käyttäen.
Pääkomponentti
Lapsikomponentti
Lapsikomponentissa saamme rekvisiittaa ja näytämme viestin p-tagissa.
msg
Nyt kun nämä kaksi komponenttia on asetettu. Sanotaan hei takaisin ParentComponentille. Tervehditään takaisin luomalla ensin painike, jonka painalluksella soitamme "helloBack" -toiminnolle. Painikkeen luomisen jälkeen alikomponentin HTML on tällainen
viesti
Luodaan "helloBackFunc" -funktio myös Method-objektiin. Lähetämme "helloBackEvent" yhdessä "helloBackVar" -muuttujan kanssa, joka sisältää merkkijonon "Hello Parent". Funktion luomisen jälkeen alikomponentin javascript olisi tällainen
Olemme päättäneet tapahtuman ampumisen. Siirrytään nyt pääkomponenttiin tapahtuman kuuntelemista varten.
Vanhempien komponentissa voimme yksinkertaisesti kuunnella tapahtumaa, aivan kuten kuuntelemme napsautustapahtumaa. Kuuntelemme vain tapahtumaa ChildComponentin tunnisteessa ja kutsumme siinä “kiitos ()” -funktion.
Kiitos-toiminnossa osoitamme välitetyn merkkijonon muuttujalle nimeltä “thanksMessage”. Kun olet luonut toiminnon ja osoittanut välitetyn merkkijonon muuttujalle, "parentComponent" javascript olisi tällainen
Ja sido mallissa oleva "thanksMessage" -muuttuja jonnekin nähdäksesi, toimiiko se vai ei.
Pääkomponentti
thanksMessage
Lapsikomponentti
Kun olet luonut ja kirjoittanut tämän koodin, siirry verkkosivulle ja lataa se uudelleen saadaksesi uusimmat toiminnot.
Voimme nähdä, että rekvisiitta välitetään onnistuneesti lapsiosaan. Jos napsautamme nyt painiketta, joka on alikomponentissa. Kiitosviestin pitäisi näkyä heti ylätason komponentin otsikon jälkeen.
Kuten näette, se näkyy.
Joten tällä tavalla voimme lähettää tai käynnistää mukautettuja tapahtumia ja kuunnella niitä jossakin muussa Vue-komponentissa.js.
Yhteenveto
Tässä artikkelissa olemme oppineet lähettämään mukautettuja tapahtumia Vuessa.js. Tässä artikkelissa on askel askeleelta oikea esimerkki sen ymmärtämiseksi ja lyhyt selitys sen mukana. Toivomme siis, että tämä artikkeli auttaa saamaan parempia ja selkeämpiä käsitteitä mukautettujen tapahtumien lähettämisestä Vue-sivustossa.js. Lisää tällaista hyödyllistä sisältöä jatka käymällä linuxhintissa.com
