Kaip perduoti įvykius, kad būtų galima bendrauti tarp „Vue“ komponentų

Struktūrizavus žiniatinklio programas naudojant komponentų architektūrą, lengva kurti ir prižiūrėti programą.

Pasirinktinių įvykių siuntimas yra vienas iš būdų, kaip galite tvarkyti ryšį tarp komponentų; rekvizitai ir lizdai yra dar du. Pasirinktiniai įvykiai leidžia siųsti duomenis iš antrinio komponento į pirminį komponentą.

Perduokite įvykius nuo vaiko iki jo tėvo

„Vue“ siūlo daug galimybių bendrauti tarp komponentų. Vienas reikšmingas būdas Komponentų ryšys vyksta per rekvizitus. Rekvizitai leidžia siųsti duomenis iš tėvų į vaikus komponentus.

Kas tada atsitiks, jei norite siųsti duomenis iš vaiko į pagrindinį komponentą? „Vue“ leidžia perduoti pasirinktinius įvykius iš vaikų į tėvų komponentus. Šis procesas leidžia pagrindiniam komponentui naudoti duomenis ir funkcijas iš antrinio komponento.

Pavyzdžiui, įsivaizduokite mygtuko komponentą su funkcija, kuri grąžina vertę kiekvieną kartą spustelėjus. Turėsite perduoti tą įvykį pirminiam komponentui, kad pirminis komponentas galėtų atnaujinti savo būseną arba atlikti veiksmą pagal grąžintą reikšmę.

„Vue“ tinkintų įvykių pavadinimų suteikimo konvencija

Prieš pasinerdami į tai, kaip skelbti pasirinktinius įvykius, turite suprasti priskirtų įvykių pavadinimų suteikimo tvarką Vue. Prieš pasirodant „Vue 3“, kūrėjai turėjo griežtai apibrėžti pasirinktinius įvykius kebabo dėklas, atskiriant žodžius pavadinimuose brūkšneliu.

Dabar įprasta, kai dirbate su HTML šablonais, apibrėžti tinkintus įvykius kebabo dėkle ir kupranugarisDėklas dirbant su JavaScript. Tačiau dirbdami su „JavaScript“ galite pasirinkti naudoti bet kurią parinktį, nes „Vue“ sukompiliuoja visus pasirinktinius įvykius atgal į kebabo dėklą.

Kai išleidžiate tinkintą įvykį, nurodykite įvykio tikslą aprašomuoju pavadinimu. Tai labai svarbu, ypač kai dirbate komandoje, kad būtų aiškus renginio tikslas.

Kaip perduoti pasirinktinius įvykius iš vaiko komponento tėvams

„Vue“ tinkintus įvykius galite skleisti dviem būdais. Galite siųsti pasirinktinius įvykius tiesiogiai (tiesiogiai „Vue“ šablone) naudodami $emit metodas, kurį siūlo Vue. Taip pat galite pasinaudoti defineEmits makrokomandą galima įsigyti iš Vue 3.

Pasirinktinių įvykių išleidimas Vue naudojant $emit metodą

$emit, integruotas Vue metodas, leidžia antriniam komponentui nusiųsti įvykį pagrindiniam komponentui. Iškviečiate šį metodą tiesiogiai (antrinio komponento šablone), kad suaktyvintumėte tinkintą įvykį. $emit metodas turi du argumentus: įvykio, kurį norite perduoti, pavadinimą ir pasirenkamą naudingą apkrovą, kuri gali nešti papildomų duomenų.

Apsvarstykite šį antrinį komponentą, kuris skleidžia įvykį, kad praneštų pagrindiniam komponentui apie mygtuko paspaudimą:

 ChildComponent.vue 
<scenarijussąranka>
importuoti { ref } iš 'vue';
const post = ref('')
scenarijus>
<šabloną>
<div>
<įvestistipo="tekstas"v-modelis="post">
<mygtukąv-on: spustelėkite="$emit('button-clicked', post)">Įrašasmygtuką>
div>
šabloną>

Šis kodo blokas parodo, kaip išsiųsti pasirinktinį įvykį iš antrinio komponento. Vaikas pradeda inicijuodamas įrašo kintamąjį tuščia eilute.

Tada antrinis komponentas susieja įvesties elementą su post kintamuoju su v modeliu, a Vu duomenų privaloma direktyva. Šis susiejimas leidžia atlikti pakeitimus įvesties lauke, kad įrašo kintamasis būtų atnaujintas automatiškai.

Mygtuko elementas turi v-on direktyvą, kuri klauso mygtuko paspaudimų įvykių. Mygtuko paspaudimas iškviečia $emit metodą su dviem argumentais: įvykio pavadinimu, mygtuko paspaudimu ir įrašo kintamojo reikšme.

Pirminis komponentas dabar gali klausytis pasirinktinio įvykio su v-on direktyva renginių tvarkymas Vue:

 ParentComponent.vue 
importuoti { ref } iš "vue";
importuoti ChildComponent iš "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (post) => {
 postList.value.push (post)
}
scenarijus>
<šabloną>
<div>
<Vaikiškas komponentas @paspaudus mygtuką="add Posts"/>
<ul>
<liv-už="post in post List">{{ post }}li>
ul>
div>
šabloną>

Šis kodo blokas parodo pirminį komponentą, importuojantį ir naudojantį ankstesnį antrinį komponentą. Pirminis komponentas apibrėžia a įrašų sąrašas masyvo kintamasis kaip reaktyvioji nuoroda. Tada komponentas apibrėžia an pridėti įrašus funkcija, kuri veikia, atsižvelgiant a paštu argumentas. Funkcija prideda naują įrašą prie postList masyvo su stumti () metodas.

The paspaustas @mygtukas įvykių klausytojas užfiksuoja pasirinktinį įvykį Vaikiškas komponentas skleidžia, kai paspaudžiate mygtuką. Dėl šio įvykio paleidžiama funkcija addPosts. Galiausiai kodo blokas prideda v-už direktyva pateikimo sąrašus Vue į ul elementą, kad kartotųsi per postList masyvą.

Įvykių siuntimas naudojant makrokomandą „defineEmits“.

Vue 3 pristatė defineEmits makrokomandą, kuri aiškiai apibrėžia įvykius, kuriuos komponentas gali skleisti. Ši makrokomanda suteikia tipui saugų būdą skleisti įvykius, vedančius į labiau struktūrizuotą kodų bazę.

Štai pavyzdys, kaip galite naudoti makrokomandą defineEmits ir pavadinti ją antriniame komponente:

 ChildComponent.vue 
<scenarijussąranka>
importuoti { ref } iš "vue";
const emit = defineEmits(["paspaudus mygtuką"]);
const post = ref("");
const mygtukasSpustelėkite = () => {
 emit("paspaudus mygtuką", post.value);
};
scenarijus>
<šabloną>
<div>
<įvestistipo="tekstas"v-modelis="post" />
<mygtukąv-on: spustelėkite="buttonClick">Įrašasmygtuką>
div>
šabloną>

Nors funkcionalumas išlieka toks pat, yra reikšmingų kodo sintaksės skirtumų tarp pirmiau pateikto kodo bloko ir to, kuriame yra $emit funkcija.

Šiame kodo bloke defineEmits makro apibrėžia paspaudus mygtuką įvykis. Iškviečiant šią makrokomandą, kodo blokas grąžina $emit funkciją, leidžiančią perduoti apibrėžtus įvykius. Masyve, perduotame komponento makrokomandai defineEmits, bus visi įvykiai, kuriuos turite perduoti pagrindiniam komponentui.

Toliau kodo blokas apibrėžia a mygtukasSpustelėkite funkcija. Ši funkcija siunčia mygtuko paspaudimo įvykį ir paskelbimo kintamąjį pagrindiniam komponentui. Antrinio komponento šablono bloke yra mygtuko elementas.

Mygtuko elementas turi a v-on: spustelėkite direktyva, suaktyvinanti mygtukąClick funkciją. Tada pagrindinis komponentas gali naudoti antrinį komponentą taip pat, kaip ir naudojant $emit metodą.

„Vue“ kūrėjai turi naudos iš komponentais pagrįstos architektūros

Galite susisiekti iš antrinio komponento su pirminiu komponentu, siųsdami įvykius naudodami $emit metodą ir makrokomandą defineEmits.

Galite pasinaudoti Vue komponentais pagrįsta architektūra, nes ji leidžia rašyti labiau struktūrizuotą, glaustą kodą. Naudodami modernias „JavaScript“ sistemas, tokias kaip „Vue“, galite naudoti žiniatinklio komponentus, W3C žiniatinklio standartą, kad pasiektumėte šią komponentais pagrįstą architektūrą.