Jak vysílat události pro komunikaci mezi komponentami Vue

Strukturování webových aplikací pomocí architektury komponent usnadňuje vytváření a údržbu vaší aplikace.

Vysílání vlastních událostí je jedním ze způsobů, jak zvládnout komunikaci mezi komponentami; rekvizity a sloty jsou dvě další. Vlastní události umožňují odesílat data z podřízeného prvku do nadřazené komponenty.

Vysílat události od dítěte k jeho rodiči

Vue nabízí spoustu možností komunikace mezi komponentami. Jeden významný způsob komunikace mezi komponentami probíhá přes rekvizity. Rekvizity umožňují posílat data z nadřazených do podřízených komponent.

Co se pak stane, pokud chcete odeslat data z podřízené komponenty do nadřazené komponenty? Vue vám umožňuje vysílat vlastní události z podřízených do nadřazených komponent. Tento proces umožňuje nadřazené komponentě používat data a funkce z podřízené komponenty.

Představte si například komponentu tlačítka s funkcí, která vrací hodnotu při každém kliknutí. Tuto událost budete muset vyslat do nadřazené komponenty, aby mohla nadřazená komponenta aktualizovat svůj stav nebo provést akci na základě vrácené hodnoty.

Konvence pojmenování pro vlastní emitované události ve Vue

Než se ponoříte do toho, jak vysílat vlastní události, musíte porozumět konvenci pojmenování vlastních událostí ve Vue. Než se objevil Vue 3, museli vývojáři striktně definovat vlastní události pouzdro na kebab, oddělující slova ve jménech znakem pomlčky.

Nyní je standardní praxí definovat vlastní události v kebab-case při práci se šablonami HTML a camelCase při práci s JavaScriptem. Při práci s JavaScriptem si však můžete vybrat jakoukoli možnost, protože Vue kompiluje všechny vlastní události zpět do kebab-case.

Když vysíláte vlastní událost, sdělte účel události popisným názvem. To je velmi důležité, zvláště když pracujete v týmu, aby byl jasný účel akce.

Jak vysílat vlastní události z podřízené do nadřazené komponenty

Existují dva způsoby, jak můžete provést vysílání vlastních událostí ve Vue. Vlastní události můžete vygenerovat inline (přímo v šabloně Vue) pomocí $emit metoda, kterou Vue poskytuje. Můžete také využít defineEmits makro dostupné od Vue 3.

Vysílání vlastních událostí ve Vue pomocí metody $emit

$emit, vestavěná metoda Vue, umožňuje podřízené komponentě odeslat událost do své nadřazené komponenty. Tuto metodu zavoláte in-line (v šabloně podřízené komponenty), abyste spustili vlastní událost. Metoda $emit má dva argumenty: název události, kterou chcete vysílat, a volitelnou užitečnou zátěž, která může nést další data.

Zvažte tuto podřízenou komponentu, která vysílá událost, která informuje nadřazenou komponentu o kliknutí na tlačítko:

 ChildComponent.vue 
<skriptzaložit>
import { ref } z 'vue';
const post = ref('')
skript>
<šablona>
<div>
<vstuptyp="text"v-model="pošta">
<knoflíkv-on: klikněte="$emit('po kliknutí na tlačítko', příspěvek)">Poštaknoflík>
div>
šablona>

Tento blok kódu ukazuje, jak vygenerovat vlastní událost z podřízené komponenty. Dítě začíná inicializací proměnné post s prázdným řetězcem.

Podřízená komponenta pak sváže vstupní prvek s proměnnou post pomocí v-model, a Směrnice pro datovou závaznost Vu. Tato vazba umožňuje změny, které provedete ve vstupním poli, aby se automaticky aktualizovala proměnná příspěvku.

Element button má direktivu v-on, která naslouchá událostem kliknutí na tlačítko. Kliknutí na tlačítko zavolá metodu $emit se dvěma argumenty: názvem události, "kliknutím na tlačítko" a hodnotou proměnné post.

Nadřazená komponenta nyní může naslouchat vlastní události s direktivou v-on for zpracování událostí ve Vue:

 ParentComponent.vue 
import { ref } z "vue";
import ChildComponent z "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (příspěvek) => {
 postList.value.push (příspěvek)
}
skript>
<šablona>
<div>
<ChildComponent @kliknuto na tlačítko="addPosts"/>
<ul>
<liv-pro="příspěvek v seznamu příspěvků">{{ pošta }}li>
ul>
div>
šablona>

Tento blok kódu ukazuje, že nadřazená komponenta importuje a používá podřízenou komponentu z předchozího. Nadřazená komponenta definuje a postList proměnná pole jako reaktivní reference. Komponenta pak definuje an addPosts funkce, která běží, přičemž a pošta argument. Funkce přidá nový příspěvek do pole postList s příponou TAM() metoda.

The @kliknutí na tlačítko posluchač událostí zachytí vlastní událost ChildComponent vydá po kliknutí na tlačítko. Tato událost způsobí spuštění funkce addPosts. Nakonec blok kódu připojí v-pro směrnice pro vykreslování seznamů ve Vue k prvku ul k iteraci přes pole postList.

Vysílání událostí s makrem defineEmits

Vue 3 představil defineEmits makro, které explicitně definuje události, které může komponenta emitovat. Toto makro poskytuje typově bezpečný způsob, jak vysílat události vedoucí ke strukturovanější kódové základně.

Zde je příklad toho, jak můžete použít makro defineEmits a volat ho ve své podřízené komponentě:

 ChildComponent.vue 
<skriptzaložit>
import { ref } z "vue";
const emit = defineEmits(["kliknutí na tlačítko"]);
const post = ref("");
tlačítko constClick = () => {
 emit("kliknutí na tlačítko", post.value);
};
skript>
<šablona>
<div>
<vstuptyp="text"v-model="pošta" />
<knoflíkv-on: klikněte="buttonClick">Poštaknoflík>
div>
šablona>

Zatímco funkčnost zůstává stejná, existují významné rozdíly v syntaxi kódu mezi výše uvedeným blokem kódu a blokem s $emit funkce.

V tomto bloku kódu je defineEmits makro definuje kliknuto na tlačítko událost. Voláním tohoto makra blok kódu vrátí funkci $emit, která vám umožní emitovat definované události. Pole předané makru defineEmits v rámci komponenty bude obsahovat všechny události, které potřebujete vyslat do nadřazené komponenty.

Dále blok kódu definuje a tlačítkoKlikněte funkce. Tato funkce vysílá událost klepnutí na tlačítko a proměnnou post do nadřazené komponenty. Blok šablony podřízené komponenty obsahuje prvek tlačítka.

Prvek tlačítka má a v-on: klikněte direktiva spouštějící funkci buttonClick. Nadřazená komponenta pak může používat podřízenou komponentu stejným způsobem jako u metody $emit.

Vývojáři Vue těží z architektury založené na komponentech

Můžete komunikovat z podřízené komponenty s jejím rodičem pomocí emitování událostí pomocí metody $emit a makra defineEmits.

Můžete těžit z architektury Vue založené na komponentách, protože vám umožňuje psát strukturovanější a stručnější kód. S moderními frameworky JavaScriptu, jako je Vue, můžete k dosažení této architektury založené na komponentech použít Web Components, webový standard W3C.