Események kibocsátása a Vue összetevői közötti kommunikációhoz

A webalkalmazások komponensarchitektúrával történő strukturálása megkönnyíti az alkalmazás felépítését és karbantartását.

Az egyéni események kibocsátása az összetevők közötti kommunikáció kezelésének egyik módja; kellékek és nyílások két másik. Az egyéni események lehetővé teszik, hogy adatokat küldjön a gyermekről a szülőkomponensnek.

Események közvetítése egy gyermektől a szülőjéhez

A Vue számos lehetőséget kínál az összetevők közötti kommunikációhoz. Az egyik jelentős módja annak A komponensek közötti kommunikáció kellékeken keresztül történik. A kellékek lehetővé teszik az adatok küldését a szülőtől a gyermek összetevőhöz.

Mi történik ezután, ha adatokat szeretne küldeni a gyermekről a szülőkomponensnek? A Vu lehetővé teszi egyéni események kibocsátását a gyermek összetevőktől a szülőkomponensek felé. Ez a folyamat lehetővé teszi a szülőkomponens számára, hogy a gyermekkomponens adatait és függvényeit használja.

Például képzeljünk el egy gombkomponenst egy olyan funkcióval, amely minden kattintásra értéket ad vissza. Ezt az eseményt ki kell adnia a szülőkomponensnek, hogy a szülőkomponens frissíthesse állapotát, vagy a visszaadott érték alapján végrehajthasson egy műveletet.

Egyéni elnevezési egyezmény az egyéni kibocsátott eseményekhez a Vue-ban

Mielőtt belemerülne az egyéni események kiadásába, meg kell értenie az egyéni események elnevezési konvencióját a Vue-ban. A Vue 3 megjelenése előtt a fejlesztőknek szigorúan meg kellett határozniuk az egyéni eseményeket kebab-tartó, elválasztja a szavakat a nevekben kötőjellel.

Ma már bevett gyakorlat, hogy az egyéni eseményeket kebab tokban határozzák meg, amikor HTML-sablonokkal dolgozik, és teveCase amikor JavaScripttel dolgozik. A JavaScript használatakor azonban bármelyik beállítást használhatja, mivel a Vue az összes egyéni eseményt visszafordítja a kebab-tokba.

Amikor egyéni eseményt bocsát ki, adja meg az esemény célját egy leíró névvel. Ez nagyon fontos, különösen akkor, ha csapatban dolgozik, hogy egyértelmű legyen az esemény célja.

Egyéni események kiküldése gyermekről szülőre

Kétféleképpen lehet egyéni eseményeket kibocsátani a Vue-ban. Egyéni eseményeket küldhet ki soron belül (közvetlenül a Vue sablonban) a $emit módszer, amelyet a Vue biztosít. Használhatja továbbá a defineEmits makró elérhető a Vue 3-ból.

Egyéni események kibocsátása a Vue-ban a $emit módszerrel

$emit, egy beépített Vue metódus, lehetővé teszi, hogy a gyermekkomponens eseményt küldjön a szülőkomponensének. Ezt a metódust in-line (az utódkomponens sablonján belül) hívja meg az egyéni esemény elindításához. A $emit metódusnak két argumentuma van: a kiadni kívánt esemény neve és egy opcionális hasznos adat, amely további adatokat hordozhat.

Tekintsük ezt a gyermekkomponenst, amely eseményt bocsát ki, hogy értesítse a szülőkomponenst egy gombkattintásról:

 ChildComponent.vue 
<forgatókönyvbeállít>
import { ref } from 'vue';
const post = ref('')
forgatókönyv>
<sablon>
<div>
<bemenettípus="szöveg"v-modell="posta">
<gombv-on: kattintson="$emit('button-clicked', post)">Hozzászólásgomb>
div>
sablon>

Ez a kódblokk megmutatja, hogyan lehet egyéni eseményt kiadni egy gyermekkomponensből. A gyermek kezdetben inicializál egy post változót egy üres karakterlánccal.

A gyermekkomponens ezután a bemeneti elemet a post változóhoz köti a v-modellel, a Vu adatkötési direktíva. Ez az összerendelés lehetővé teszi, hogy a beviteli mező módosításait automatikusan frissítse a bejegyzési változó.

A gombelemnek van egy v-on direktívája, amely figyeli a gombra kattintási eseményeket. A gombkattintás két argumentummal hívja meg a $emit metódust: az esemény nevével, a "button-clicked" és a post változó értékével.

A szülőkomponens most figyelheti az egyéni eseményt a v-on direktívával események kezelése Vue-ban:

 ParentComponent.vue 
import { ref } from "vue";
a ChildComponent importálása a "./components/ChildComponent.vue" fájlból;
const postList = ref([])
const addPosts = (bejegyzés) => {
 postList.value.push (post)
}
forgatókönyv>
<sablon>
<div>
<ChildComponent @gombbal kattintott="addPosts"/>
<ul>
<liv-for="post in post List">{{ bejegyzés }}li>
ul>
div>
sablon>

Ez a kódblokk egy szülőkomponenst mutat be, amely a korábbi gyermekkomponenst importálja és használja. A szülőkomponens meghatározza a postList tömbváltozó reaktív hivatkozásként. A komponens ezután meghatároz egy addPosts függvény, amely lefut, figyelembe véve a hozzászólás érv. A függvény egy új bejegyzést ad a postList tömbhöz a nyom() módszer.

A @gomb-kattintás eseményfigyelő rögzíti az egyéni eseményt ChildComponent a gomb megnyomása után bocsát ki. Ez az esemény elindítja az addPosts függvényt. Végül a kódblokk csatolja a v-for irányelv számára listák megjelenítése a Vue-ban az ul elemre a postList tömbön való iterációhoz.

Események kibocsátása a defineEmits makróval

A Vue 3 bemutatta a defineEmits makró, amely kifejezetten meghatározza, hogy egy komponens milyen eseményeket bocsáthat ki. Ez a makró típusbiztos módot biztosít az események kibocsátására, amelyek egy strukturáltabb kódbázishoz vezetnek.

Íme egy példa arra, hogyan használhatja a defineEmits makrót, és hogyan hívhatja meg a gyermekkomponensben:

 ChildComponent.vue 
<forgatókönyvbeállít>
import { ref } from "vue";
const emit = defineEmits(["gombra kattintva"]);
const post = ref("");
const gombKattintson = () => {
 emit("gombra kattintott", post.value);
};
forgatókönyv>
<sablon>
<div>
<bemenettípus="szöveg"v-modell="posta" />
<gombv-on: kattintson="buttonClick">Hozzászólásgomb>
div>
sablon>

Bár a funkcionalitás változatlan marad, jelentős különbségek vannak a kód szintaxisában a fenti kódblokk és a $emit funkció.

Ebben a kódblokkban a defineEmits makró határozza meg a gombbal kattintott esemény. A makró meghívásával a kódblokk egy $emit függvényt ad vissza, amely lehetővé teszi a meghatározott események kibocsátását. Az összetevőn belül a defineEmits makrónak átadott tömb tartalmazza az összes olyan eseményt, amelyet a szülőkomponensnek ki kell adnia.

Ezután a kódblokk meghatározza a gombraKattintson funkció. Ez a függvény a gombra kattintott eseményt és a post változót küldi ki a szülőkomponensnek. A gyermekkomponens sablonblokkja egy gombelemet tartalmaz.

A gombelemen a v-on: kattintson direktíva, amely elindítja a buttonClick funkciót. A szülőkomponens ezután ugyanúgy használhatja a gyermekkomponenst, mint a $emit metódussal.

A Vue fejlesztői hasznot húznak a komponens alapú architektúrából

Egy utódkomponensről a szülővel kommunikálhat események kibocsátásával a $emit metódus és a defineEmits makró használatával.

Hasznos lehet a Vue komponens alapú architektúrája, mivel lehetővé teszi strukturáltabb, tömörebb kód írását. A modern JavaScript-keretrendszerekkel, mint például a Vue, a Web Components, a W3C webszabvány használatával érheti el ezt az összetevő-alapú architektúrát.