Tapahtumien lähettäminen Vue-komponenttien väliseen viestintään

Verkkosovellusten jäsentäminen komponenttiarkkitehtuurilla tekee sovelluksen rakentamisesta ja ylläpidosta helppoa.

Mukautettujen tapahtumien lähettäminen on yksi tapa käsitellä komponenttien välistä viestintää. rekvisiitta ja paikat ovat kaksi muuta. Mukautettujen tapahtumien avulla voit lähettää tietoja lapsista pääkomponenttiin.

Lähetä tapahtumia lapselta vanhemmalleen

Vue tarjoaa monia vaihtoehtoja kommunikoida komponenttien välillä. Yksi merkittävä tapa Komponenttien välinen viestintä tapahtuu rekvisiitta. Propsin avulla voit lähettää tietoja vanhemmilta lapsikomponenteille.

Mitä sitten tapahtuu, jos haluat lähettää tietoja lapsista pääkomponenttiin? Vu antaa sinun lähettää mukautettuja tapahtumia lapsilta vanhemmille komponenteille. Tämän prosessin avulla pääkomponentti voi käyttää alikomponentin tietoja ja toimintoja.

Kuvittele esimerkiksi painikekomponentti, jossa on funktio, joka palauttaa arvon jokaisella napsautuksella. Sinun on lähetettävä kyseinen tapahtuma pääkomponentille, jotta pääkomponentti voi päivittää tilansa tai suorittaa toiminnon palautetun arvon perusteella.

Vuen mukautettujen tapahtumien nimeämissopimus

Ennen kuin sukellat mukautettujen tapahtumien lähettämiseen, sinun on ymmärrettävä mukautettujen tapahtumien nimeämiskäytäntö Vuessa. Ennen kuin Vue 3 syntyi, kehittäjien oli tiukasti määriteltävä mukautetut tapahtumat kebab-laukku, erottaa nimissä olevat sanat yhdysmerkillä.

Nyt on vakiokäytäntö määrittää mukautetut tapahtumasi kebab-kotelossa, kun työskentelet HTML-mallien kanssa, ja camelCase kun työskentelet JavaScriptin kanssa. Voit kuitenkin käyttää mitä tahansa vaihtoehtoa JavaScriptin kanssa työskennellessäsi, koska Vue kokoaa kaikki mukautetut tapahtumat takaisin kebab-koteloon.

Kun lähetät mukautetun tapahtuman, välitä tapahtuman tarkoitus kuvaavalla nimellä. Tämä on erittäin tärkeää, varsinkin kun työskentelet ryhmässä, jotta tapahtuman tarkoitus on selvä.

Kuinka lähettää mukautettuja tapahtumia lapsilta vanhemmille

Voit lähettää mukautettuja tapahtumia Vuessa kahdella tavalla. Voit lähettää mukautettuja tapahtumia upotettuna (suoraan Vue-mallissa) $emit menetelmä, jonka Vue tarjoaa. Voit myös hyödyntää defineEmits makro saatavilla Vue 3:sta.

Mukautettujen tapahtumien lähettäminen Vuessa $emit-menetelmällä

$emit, sisäänrakennettu Vue-menetelmä, sallii alikomponentin lähettää tapahtuman pääkomponentilleen. Kutsut tätä menetelmää suoraan (alikomponentin mallissa) käynnistääksesi mukautetun tapahtuman. $emit-menetelmässä on kaksi argumenttia: lähetettävän tapahtuman nimi ja valinnainen hyötykuorma, joka voi kuljettaa lisätietoja.

Harkitse tätä alikomponenttia, joka lähettää tapahtuman ilmoittaakseen pääkomponentille painikkeen napsautuksesta:

 ChildComponent.vue 
<käsikirjoitusperustaa>
tuo { viite } 'vue'sta;
const post = viite('')
käsikirjoitus>
<sapluuna>
<div>
<syöttötyyppi="teksti"v-malli="lähettää">
<-painikettav-on: napsauta="$emit('button-clicked', post)">Lähettää-painiketta>
div>
sapluuna>

Tämä koodilohko näyttää, kuinka mukautettu tapahtuma lähetetään alikomponentista. Lapsi aloittaa alustamalla viestimuuttujan tyhjällä merkkijonolla.

Lapsikomponentti sitoo sitten syöttöelementin post-muuttujaan v-mallilla, a Vu-tietoja sitova direktiivi. Tämä sidonta sallii syöttökenttään tekemäsi muutokset päivittääksesi post-muuttujan automaattisesti.

Painikeelementissä on v-on-käsky, joka kuuntelee painikkeen napsautustapahtumia. Painikenapsautus kutsuu $emit-metodia kahdella argumentilla: tapahtuman nimi, "painiketta napsautettu" ja viestimuuttujan arvo.

Pääkomponentti voi nyt kuunnella mukautettua tapahtumaa v-on-käskyn avulla tapahtumien käsittely Vuessa:

 ParentComponent.vue 
tuo { viite } "vue":sta;
tuo ChildComponent osoitteesta "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (viesti) => {
 postList.value.push (post)
}
käsikirjoitus>
<sapluuna>
<div>
<ChildComponent @napsautettua="addPosts"/>
<ul>
<liv-for="post in post List">{{ viesti }}li>
ul>
div>
sapluuna>

Tämä koodilohko näyttää emokomponentin, joka tuo ja käyttää aiempia alikomponentteja. Pääkomponentti määrittää a postList taulukkomuuttuja reaktiivisena viittauksena. Komponentti määrittää sitten an lisää viestejä toiminto, joka suoritetaan, ottaen a lähettää Perustelu. Funktio lisää uuden viestin postList-taulukkoon työntää() menetelmä.

The @painiketta napsautettu tapahtumakuuntelija tallentaa mukautetun tapahtuman ChildComponent lähettää, kun napsautat painiketta. Tämä tapahtuma saa addPosts-toiminnon suorittamaan. Lopuksi koodilohko liittää v-for direktiiviä varten renderöintiluettelot Vuessa ul-elementtiin iteroidaksesi postList-taulukon yli.

Tapahtumien lähettäminen defineEmits-makrolla

Vue 3 esitteli defineEmits makro, joka määrittelee eksplisiittisesti tapahtumat, jotka komponentti voi lähettää. Tämä makro tarjoaa tyyppiturvallisen tavan lähettää tapahtumia, jotka johtavat jäsennellympään koodikantaan.

Tässä on esimerkki siitä, kuinka voit käyttää defineEmits-makroa ja kutsua sitä alikomponentissasi:

 ChildComponent.vue 
<käsikirjoitusperustaa>
tuo { viite } "vue":sta;
const emit = defineEmits(["napsautus"]);
const post = ref("");
const-painikeNapsauta = () => {
 emit("painiketta napsautettu", post.arvo);
};
käsikirjoitus>
<sapluuna>
<div>
<syöttötyyppi="teksti"v-malli="lähettää" />
<-painikettav-on: napsauta="buttonClick">Lähettää-painiketta>
div>
sapluuna>

Vaikka toiminnallisuus pysyy samana, koodin syntaksissa on merkittäviä eroja yllä olevan koodilohkon ja koodilohkon välillä. $emit toiminto.

Tässä koodilohkossa defineEmits makro määrittelee napsautettua tapahtuma. Kutsumalla tätä makroa koodilohko palauttaa $emit-funktion, jonka avulla voit lähettää määritetyt tapahtumat. Komponentin defineEmits-makrolle välitetty taulukko sisältää kaikki tapahtumat, jotka sinun on lähetettävä pääkomponentille.

Seuraavaksi koodilohko määrittää a painikettaNapsauta toiminto. Tämä toiminto lähettää painiketta napsautetun tapahtuman ja post-muuttujan pääkomponentille. Alikomponentin mallilohko sisältää painikeelementin.

Painikeelementissä on a v-on: napsauta ohje, joka laukaisee buttonClick-toiminnon. Pääkomponentti voi sitten käyttää alikomponenttia samalla tavalla kuin $emit-menetelmällä.

Vue-kehittäjät hyötyvät komponenttipohjaisesta arkkitehtuurista

Voit kommunikoida alikomponentista sen yläpuolelle lähettämällä tapahtumia käyttämällä $emit-menetelmää ja defineEmits-makroa.

Voit hyötyä Vuen komponenttipohjaisesta arkkitehtuurista, koska sen avulla voit kirjoittaa jäsennellympää, ytimekkäämpää koodia. Nykyaikaisilla JavaScript-kehyksillä, kuten Vue, voit käyttää Web Componentsia, W3C-verkkostandardia, saavuttaaksesi tämän komponenttipohjaisen arkkitehtuurin.