Kuidas edastada sündmusi, et Vue komponentide vahel suhelda

Veebirakenduste struktureerimine komponentarhitektuuri abil muudab rakenduse loomise ja hooldamise lihtsaks.

Kohandatud sündmuste väljastamine on üks komponentidevahelise suhtluse haldamise viise; rekvisiidid ja pilud on kaks muud. Kohandatud sündmused võimaldavad saata andmeid alamkomponendist emakomponendile.

Edastage sündmusi lapselt tema vanemale

Vue pakub komponentidevaheliseks suhtlemiseks palju võimalusi. Üks märkimisväärne viis side komponentide vahel toimub rekvisiitide kaudu. Rekvisiidid võimaldavad teil saata andmeid vanematelt alamkomponentidele.

Mis siis juhtub, kui soovite saata andmeid lapselt emakomponendile? Vu võimaldab teil edastada kohandatud sündmusi alamkomponentidelt vanemkomponentidele. See protsess võimaldab ülemkomponendil kasutada alamkomponendi andmeid ja funktsioone.

Näiteks kujutage ette nupukomponenti, mille funktsioon tagastab iga klõpsu korral väärtuse. Peate selle sündmuse edastama ülemkomponendile, et võimaldada ülemkomponendil värskendada oma olekut või sooritada tagastatud väärtusel põhinevaid toiminguid.

Vue kohandatud väljastatud sündmuste nimetamise konventsioon

Enne kohandatud sündmuste väljastamise teemasse sukeldumist peate mõistma Vue kohandatud sündmuste nimetamise tava. Enne Vue 3 ilmumist pidid arendajad rangelt määratlema kohandatud sündmused kebabikarp, eraldades sõnad nimedes sidekriipsuga.

Nüüd on tavapärane HTML-mallidega töötamisel oma kohandatud sündmused kebabikastis määratleda ja camelCase JavaScriptiga töötades. Siiski saate JavaScriptiga töötamisel kasutada mis tahes suvandit, kuna Vue kompileerib kõik kohandatud sündmused tagasi kebabikasti.

Kui edastate kohandatud sündmuse, edastage sündmuse eesmärk kirjeldava nimega. See on väga oluline, eriti kui töötate meeskonnas, et sündmuse eesmärk oleks selge.

Kuidas edastada kohandatud sündmusi lapselt vanemale

Vue kohandatud sündmuste edastamiseks on kaks võimalust. Saate väljastada kohandatud sündmusi tekstisiseselt (otse Vue mallis) koos $emit meetod, mida Vue pakub. Võite kasutada ka defineEmits makro saadaval Vue 3-st.

Kohandatud sündmuste väljastamine Vue-s meetodiga $emit

$emit, sisseehitatud Vue meetod, võimaldab alamkomponendil saata sündmuse oma emakomponendile. Kutsute seda meetodit reasiseselt (alamkomponendi malli sees), et käivitada kohandatud sündmus. $emit meetodil on kaks argumenti: sündmuse nimi, mida soovite väljastada, ja valikuline kasulik koormus, mis võib kanda täiendavaid andmeid.

Mõelge sellele alamkomponendile, mis väljastab sündmuse, mis teavitab emakomponenti nupuklõpsudest:

 ChildComponent.vue 
<stsenaariumseadistamine>
import { ref } 'vue'st;
const post = ref('')
stsenaarium>
<malli>
<div>
<sisendtüüp="tekst"v-mudel="postitus">
<nuppuv-on: klõpsake="$emit('button-clicked', post)">Postitanuppu>
div>
malli>

See koodiplokk näitab, kuidas alamkomponendist kohandatud sündmust väljastada. Laps alustab postitusmuutuja initsialiseerimisest tühja stringiga.

Seejärel seob alamkomponent sisendelemendi postmuutujaga v-mudeliga, a Vu andmete siduv direktiiv. See sidumine võimaldab teil sisestusväljal teha muudatusi, et postitusmuutujat automaatselt värskendada.

Nupuelemendil on käsk v-on, mis kuulab nupul klõpsamise sündmusi. Nupuklõps kutsub välja $emit meetodi kahe argumendiga: sündmuse nimi, "nupul klõpsatud" ja postitusmuutuja väärtus.

Ülemkomponent saab nüüd kuulata kohandatud sündmust käsuga v-on sündmuste käsitlemine Vues:

 ParentComponent.vue 
import { ref } "vue"-st;
importige ChildComponent saidist "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (postitus) => {
 postList.value.push (postitus)
}
stsenaarium>
<malli>
<div>
<ChildComponent @nupuvajutusega="lisa postitusi"/>
<ul>
<liv-eest="postitus postitusloendis">{{ postitus }}li>
ul>
div>
malli>

See koodiplokk demonstreerib vanemkomponenti, kes impordib ja kasutab varasemat alamkomponenti. Vanemkomponent määratleb a postitusloend massiivi muutuja reaktiivse viitena. Seejärel määratleb komponent an lisa postitusi funktsioon, mis töötab, võttes a postitus argument. Funktsioon lisab massiivi postList uue postituse koos push () meetod.

The @nupp klõpsatud sündmuste kuulaja jäädvustab kohandatud sündmuse ChildComponent kiirgab, kui klõpsate nupul. See sündmus käivitab funktsiooni addPosts. Lõpuks kinnitab koodiplokk v-eest käskkiri renderdamise loendid Vue's elemendile ul, et itereerida üle massiivi postList.

Sündmuste väljastamine makroga defineEmits

Vue 3 tutvustas defineEmits makro, mis määratleb selgelt sündmused, mida komponent võib kiirata. See makro pakub tüübikindlat viisi sündmuste edastamiseks, mis viivad struktureerituma koodibaasini.

Siin on näide selle kohta, kuidas saate makrot defineEmits kasutada ja kutsuda seda oma alamkomponendis:

 ChildComponent.vue 
<stsenaariumseadistamine>
import { ref } "vue"-st;
const emit = defineEmits(["nupule vajutatud"]);
const post = ref("");
const nuppKlõpsa = () => {
 emit("nupuga klõpsatud", post.väärtus);
};
stsenaarium>
<malli>
<div>
<sisendtüüp="tekst"v-mudel="postitus" />
<nuppuv-on: klõpsake="buttonClick">Postitanuppu>
div>
malli>

Kuigi funktsionaalsus jääb samaks, on koodi süntaksis ülaltoodud koodiploki ja selle koodiploki vahel olulisi erinevusi. $emit funktsiooni.

Selles koodiplokis on defineEmits makro määratleb nupuvajutusega sündmus. Selle makro kutsumisel tagastab koodiplokk funktsiooni $emit, mis võimaldab teil määratletud sündmusi väljastada. Massiiv, mis edastatakse komponendis defineEmits makrole, sisaldab kõiki sündmusi, mida peate lähtekomponendile edastama.

Järgmisena määratleb koodiplokk a nuppKlõpsa funktsiooni. See funktsioon saadab ülemkomponendile nupuvajutusega sündmuse ja postitusmuutuja. Alamkomponendi malliplokis on nupuelement.

Nupuelemendil on a v-on: klõpsake käsk, mis käivitab funktsiooni buttonClick. Ülemkomponent saab seejärel kasutada alamkomponenti samamoodi nagu $emit meetodi puhul.

Vue arendajad saavad kasu komponendipõhisest arhitektuurist

Saate suhelda alamkomponendist selle vanemaga, väljastades sündmusi, kasutades meetodit $emit ja makrot defineEmits.

Saate kasu Vue komponendipõhisest arhitektuurist, kuna see võimaldab teil kirjutada struktureeritumat ja ülevaatlikumat koodi. Kaasaegsete JavaScripti raamistike, nagu Vue, abil saate selle komponendipõhise arhitektuuri saavutamiseks kasutada W3C veebistandardit Web Components.