Ako vysielať udalosti na komunikáciu medzi komponentmi Vue

Štruktúrovanie vašich webových aplikácií pomocou komponentovej architektúry uľahčuje vytváranie a údržbu vašej aplikácie.

Vysielanie vlastných udalostí je jedným zo spôsobov, ako môžete zvládnuť komunikáciu medzi komponentmi; rekvizity a sloty sú dve ďalšie. Vlastné udalosti vám umožňujú odosielať údaje z podriadeného prvku do nadradeného komponentu.

Vysielajte udalosti od dieťaťa k jeho rodičovi

Vue ponúka veľa možností na komunikáciu medzi komponentmi. Jeden významný spôsob komunikácia medzi komponentmi prebieha cez rekvizity. Rekvizity vám umožňujú odosielať údaje z rodičovských do podradených komponentov.

Čo sa potom stane, ak chcete odoslať údaje z dieťaťa do nadradeného komponentu? Vue vám umožňuje vysielať vlastné udalosti z podriadených do nadradených komponentov. Tento proces umožňuje rodičovskému komponentu používať údaje a funkcie z podriadeného komponentu.

Predstavte si napríklad komponent tlačidla s funkciou, ktorá vracia hodnotu pri každom kliknutí. Túto udalosť budete musieť vyslať do nadradeného komponentu, aby ste umožnili nadradenému komponentu aktualizovať svoj stav alebo vykonať akciu na základe vrátenej hodnoty.

Konvencia pomenovania pre vlastné emitované udalosti vo Vue

Predtým, ako sa ponoríte do toho, ako vysielať vlastné udalosti, musíte pochopiť konvenciu pomenovania vlastných udalostí vo Vue. Pred objavením sa Vue 3 museli vývojári striktne definovať vlastné udalosti kufrík na kebab, oddeľovanie slov v názvoch znakom pomlčky.

Teraz je štandardnou praxou definovať svoje vlastné udalosti v kebab-case pri práci so šablónami HTML a camelCase pri práci s JavaScriptom. Pri práci s JavaScriptom si však môžete zvoliť akúkoľvek možnosť, pretože Vue kompiluje všetky vlastné udalosti späť do kebab-case.

Keď vysielate vlastnú udalosť, uveďte účel udalosti s popisným názvom. Je to veľmi dôležité, najmä keď pracujete v tíme, aby bol jasný účel udalosti.

Ako vysielať vlastné udalosti z podriadeného do nadradeného komponentu

Existujú dva spôsoby, ako môžete dosiahnuť vysielanie vlastných udalostí vo Vue. Vlastné udalosti môžete vysielať inline (priamo v šablóne Vue) pomocou $emit metóda, ktorú Vue poskytuje. Môžete tiež využiť defineEmits makro dostupné od Vue 3.

Vysielanie vlastných udalostí vo Vue pomocou metódy $emit

$emit, vstavaná metóda Vue, umožňuje podriadenému komponentu poslať udalosť svojmu rodičovskému komponentu. Túto metódu zavoláte in-line (v rámci šablóny podriadeného komponentu) na spustenie vlastnej udalosti. Metóda $emit má dva argumenty: názov udalosti, ktorú chcete vyslať, a voliteľné užitočné zaťaženie, ktoré môže niesť ďalšie údaje.

Uvažujme o tomto podradenom komponente, ktorý vysiela udalosť, aby upozornil nadradený komponent na kliknutie na tlačidlo:

 ChildComponent.vue 
<skriptnastaviť>
import { ref } z 'vue';
const post = ref('')
skript>
<šablóna>
<div>
<vstuptypu="text"v-model="post">
<tlačidlov-on: kliknutie="$emit('po kliknutí na tlačidlo', príspevok)">Príspevoktlačidlo>
div>
šablóna>

Tento blok kódu ukazuje, ako vygenerovať vlastnú udalosť z podradeného komponentu. Dieťa začína inicializáciou premennej post s prázdnym reťazcom.

Podradený komponent potom viaže vstupný prvok na post premennú pomocou v-modelu, a Smernica Vue data záväzná. Táto väzba umožňuje zmeny, ktoré vykonáte vo vstupnom poli, aby sa automaticky aktualizovala premenná príspevku.

Element button má direktívu v-on, ktorá počúva udalosti kliknutia na tlačidlo. Kliknutie na tlačidlo volá metódu $emit s dvoma argumentmi: názvom udalosti, kliknutím na tlačidlo a hodnotou premennej post.

Nadradený komponent teraz môže načúvať vlastnej udalosti pomocou direktívy v-on for spracovanie udalostí vo Vue:

 ParentComponent.vue 
import { ref } z "vue";
import ChildComponent z "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (príspevok) => {
 postList.value.push (príspevok)
}
skript>
<šablóna>
<div>
<ChildComponent @kliknutie na tlačidlo="addPosts"/>
<ul>
<liv-pre="príspevok v zozname príspevkov">{{ príspevok }}li>
ul>
div>
šablóna>

Tento blok kódu ukazuje, ako nadradený komponent importuje a používa podradený komponent z predchádzajúceho. Rodičovský komponent definuje a postList premenná poľa ako reaktívna referencia. Komponent potom definuje an addPosts funkcia, ktorá beží, pričom a príspevok argument. Funkcia pridá nový príspevok do poľa postList s príponou TAM() metóda.

The klikli ste na @tlačidlo poslucháč udalosti zachytáva vlastnú udalosť ChildComponent vyšle po kliknutí na tlačidlo. Táto udalosť spôsobí spustenie funkcie addPosts. Nakoniec blok kódu pripojí v-pre smernica pre vykresľovacie zoznamy vo Vue na prvok ul na iteráciu poľa postList.

Vysielanie udalostí pomocou makra defineEmits

Vue 3 predstavil defineEmits makro, ktoré explicitne definuje udalosti, ktoré môže komponent emitovať. Toto makro poskytuje typovo bezpečný spôsob vysielania udalostí vedúcich k štruktúrovanejšej kódovej základni.

Tu je príklad toho, ako môžete použiť makro defineEmits a zavolať ho vo svojom podradenom komponente:

 ChildComponent.vue 
<skriptnastaviť>
import { ref } z "vue";
const emit = defineEmits(["kliknutie na tlačidlo"]);
const post = ref("");
tlačidlo constClick = () => {
 emit("kliknutie na tlačidlo", post.value);
};
skript>
<šablóna>
<div>
<vstuptypu="text"v-model="post" />
<tlačidlov-on: kliknutie="buttonClick">Príspevoktlačidlo>
div>
šablóna>

Zatiaľ čo funkčnosť zostáva rovnaká, medzi vyššie uvedeným blokom kódu a blokom s kódom existujú významné rozdiely v syntaxi kódu $emit funkciu.

V tomto bloku kódu je defineEmits makro definuje kliknutie na tlačidlo udalosť. Zavolaním tohto makra blok kódu vráti funkciu $emit, ktorá vám umožní emitovať definované udalosti. Pole odovzdané do makra defineEmits v rámci komponentu bude obsahovať všetky udalosti, ktoré potrebujete vyslať do nadradeného komponentu.

Ďalej blok kódu definuje a tlačidloKliknutie funkciu. Táto funkcia vysiela udalosť kliknutia na tlačidlo a premennú post do nadradeného komponentu. Blok šablóny podriadeného komponentu obsahuje prvok tlačidla.

Prvok tlačidla má a v-on: kliknutie direktíva spúšťajúca funkciu buttonClick. Rodičovský komponent potom môže použiť podriadený komponent rovnakým spôsobom ako pri metóde $emit.

Vývojári Vue profitujú z architektúry založenej na komponentoch

Môžete komunikovať z podriadeného komponentu s jeho rodičom pomocou vysielania udalostí pomocou metódy $emit a makra defineEmits.

Môžete ťažiť z architektúry založenej na komponentoch Vue, pretože vám umožňuje písať štruktúrovanejší a stručnejší kód. S modernými frameworkami JavaScript, ako je Vue, môžete použiť Web Components, webový štandard W3C, na dosiahnutie tejto architektúry založenej na komponentoch.