Naučite se, kako vam lahko model, ki temelji na dogodkih, pomaga prenašati podatke med komponentami.
Strukturiranje vaših spletnih aplikacij z uporabo arhitekture komponent olajša gradnjo in vzdrževanje vaše aplikacije.
Oddajanje dogodkov po meri je eden od načinov za upravljanje komunikacije med komponentami; rekviziti in reže sta še dva. Dogodki po meri vam omogočajo pošiljanje podatkov iz podrejene v nadrejeno komponento.
Prenesite dogodke od otroka do starša
Vue ponuja veliko možnosti za komunikacijo med komponentami. En pomemben način za komunikacija med komponentami poteka prek rekvizitov. Props vam omogočajo pošiljanje podatkov od nadrejenih do podrejenih komponent.
Kaj se potem zgodi, če želite poslati podatke iz otroka v nadrejeno komponento? Vue vam omogoča oddajanje dogodkov po meri iz podrejenih v nadrejene komponente. Ta postopek nadrejeni komponenti omogoča uporabo podatkov in funkcij podrejene komponente.
Predstavljajte si na primer komponento gumba s funkcijo, ki vrne vrednost ob vsakem kliku. Ta dogodek boste morali oddati nadrejeni komponenti, da omogočite nadrejeni komponenti, da posodobi svoje stanje ali izvede dejanje na podlagi vrnjene vrednosti.
Konvencija o poimenovanju dogodkov po meri v Vue
Preden se poglobite v oddajanje dogodkov po meri, morate razumeti konvencijo poimenovanja dogodkov po meri v Vue. Preden se je pojavil Vue 3, so morali razvijalci strogo definirati dogodke po meri kebab-kovček, ločevanje besed v imenih z vezajem.
Zdaj je običajna praksa, da svoje dogodke po meri definirate v kebab-case pri delu s predlogami HTML in CamelCase pri delu z JavaScriptom. Vendar pa se lahko pri delu z JavaScriptom odločite za uporabo katere koli možnosti, saj Vue prevede vse dogodke po meri nazaj v kebab-case.
Ko oddate dogodek po meri, navedite namen dogodka z opisnim imenom. To je zelo pomembno, zlasti ko delate v skupini, da je namen dogodka jasen.
Kako oddati dogodke po meri iz podrejene v nadrejeno komponento
Obstajata dva načina, kako lahko dosežete oddajanje dogodkov po meri v Vue. Dogodke po meri lahko oddajate v vrstici (neposredno v predlogi Vue) z $emit metodo, ki jo ponuja Vue. Uporabite lahko tudi definirajEmits makro na voljo iz Vue 3.
Oddajanje dogodkov po meri v Vue z metodo $emit
$emit, vgrajena metoda Vue, omogoča podrejeni komponenti, da pošlje dogodek svoji nadrejeni komponenti. To metodo pokličete v vrstici (znotraj predloge podrejene komponente), da sprožite dogodek po meri. Metoda $emit sprejme dva argumenta: ime dogodka, ki ga želite oddati, in izbirni koristni tovor, ki lahko nosi dodatne podatke.
Razmislite o tej podrejeni komponenti, ki odda dogodek, da nadrejeno komponento obvesti o kliku gumba:
ChildComponent.vue
<scenarijnastaviti>
uvoz { ref } iz 'vue';const post = ref('')
scenarij>
<predlogo>
<div>
<vnosvrsta="besedilo"v-model="post">
<gumbv-on: klik="$emit('gumb kliknjen', objava)">Objavigumb>
div>
predlogo>
Ta blok kode prikazuje, kako oddajati dogodek po meri iz podrejene komponente. Otrok začne z inicializacijo post spremenljivke s praznim nizom.
Podrejena komponenta nato poveže vhodni element s spremenljivko post z v-modelom, a Direktiva za vezavo podatkov Vue. Ta vezava omogoča spremembe, ki jih naredite v vnosnem polju, za samodejno posodobitev spremenljivke objave.
Element gumba ima direktivo v-on, ki posluša dogodke klika na gumb. Klik gumba pokliče metodo $emit z dvema argumentoma: ime dogodka, "klik gumba" in vrednost spremenljivke objave.
Nadrejena komponenta lahko zdaj posluša dogodek po meri z direktivo v-on za obravnavanje dogodkov v Vue:
ParentComponent.vue
uvoz { ref } iz "vue";
uvoz ChildComponent iz "./components/ChildComponent.vue";const postList = ref([])
const addPosts = (objava) => {
postList.value.push (objava)
}
scenarij>
<predlogo>
<div>
<ChildComponent @kliknjen na gumb="addPosts"/>
<ul>
<liv-za="objava v postList">{{ objava }}li>
ul>
div>
predlogo>
Ta blok kode prikazuje nadrejeno komponento, ki uvaža in uporablja podrejeno komponento od prej. Nadrejena komponenta definira a postList matrično spremenljivko kot reaktivno referenco. Komponenta nato definira an addPosts funkcija, ki teče, ob a post prepir. Funkcija doda novo objavo v matriko postList z potisni() metoda.
The @gumb-klik poslušalec dogodkov zajame dogodek po meri ChildComponent oddaja, ko kliknete gumb. Ta dogodek povzroči zagon funkcije addPosts. Nazadnje blok kode pritrdi v-za direktiva za upodabljanje seznamov v Vue na element ul za ponavljanje po matriki postList.
Oddajanje dogodkov z makrom defineEmits
Vue 3 je predstavil definirajEmits makro, ki izrecno definira dogodke, ki jih komponenta lahko odda. Ta makro zagotavlja tipsko varen način za oddajanje dogodkov, ki vodijo do bolj strukturirane kodne baze.
Tukaj je primer, kako lahko uporabite makro defineEmits in ga pokličete v podrejeni komponenti:
ChildComponent.vue
<scenarijnastaviti>
uvoz { ref } iz "vue";const emit = defineEmits(["kliknjen gumb"]);
const post = ref("");
const buttonClick = () => {
emit("kliknjen gumb", post.value);
};
scenarij>
<predlogo>
<div>
<vnosvrsta="besedilo"v-model="post" />
<gumbv-on: klik="klik na gumb">Objavigumb>
div>
predlogo>
Medtem ko funkcionalnost ostaja enaka, obstajajo precejšnje razlike v sintaksi kode med zgornjim blokom kode in tistim z $emit funkcijo.
V tem kodnem bloku je definirajEmits makro definira kliknjen na gumb dogodek. S klicem tega makra kodni blok vrne funkcijo $emit, ki vam omogoča oddajanje definiranih dogodkov. Matrika, posredovana makru defineEmits znotraj komponente, bo vsebovala vse dogodke, ki jih morate oddati nadrejeni komponenti.
Nato blok kode definira a gumb Kliknite funkcijo. Ta funkcija odda dogodek klika na gumb in spremenljivko objave nadrejeni komponenti. Blok predloge podrejene komponente vsebuje element gumba.
Element gumba ima a v-on: klik direktiva, ki sproži funkcijo buttonClick. Nadrejena komponenta lahko nato uporablja podrejeno komponento na enak način, kot je to storila z metodo $emit.
Razvijalci Vue imajo koristi od arhitekture, ki temelji na komponentah
Iz podrejene komponente lahko komunicirate z nadrejeno komponento z oddajanjem dogodkov z uporabo metode $emit in makra defineEmits.
Izkoristite lahko arhitekturo Vue, ki temelji na komponentah, saj vam omogoča pisanje bolj strukturirane in jedrnate kode. S sodobnimi okviri JavaScript, kot je Vue, lahko uporabite spletne komponente, spletni standard W3C, da dosežete to arhitekturo, ki temelji na komponentah.
