Phenquestions
Vue.js je všestranný a plnohodnotný rámec pre vytváranie obrovských webových aplikácií. Akákoľvek webová aplikácia je rozdelená na Komponenty. Napríklad jednoduchá webová stránka, ktorá obsahuje hlavičku, bočný panel a niektoré ďalšie komponenty. Za účelom riadenia a vybavovania tohto prístupu založeného na komponentoch, Vue.js ponúka vzťah rodič - dieťa medzi komponentmi a ak chceme posielať nejaké údaje medzi komponentmi. Vue.js ponúka rekvizity na odosielanie údajov z rodiča do podradeného komponentu, ale na odosielanie údajov z dieťaťa do nadradeného prvku; musíme vydávať vlastné udalosti. V tomto článku sa dozvieme o streľbe a počúvaní vlastných udalostí.Najskôr sa pozrime, ako spustiť vlastnú udalosť vo Vue.js a potom ako si túto udalosť vypočuť. Syntax na spustenie udalosti vo Vue.js je
toto.$ emit ('eventName')V tejto syntaxe musíme byť pri pomenovaní udalosti opatrní, pretože používame rovnaký názov; túto udalosť si neskôr vypočujeme. Ak si chcete túto udalosť vypočuť, môžeme ju počúvať, keď počúvame udalosť kliknutia vo Vue.js. Napríklad
Môžeme zapísať akýkoľvek výraz do obrátených čiarok aj ako funkciu. Skúsme teda príklad, aby sme ho lepšie pochopili.
Príklad
Predpokladajme, že máme komponent s názvom „parentComponent“, ktorý obsahuje podradený komponent s názvom „childComponent“, ktorému pomocou rekvizít odovzdávame správu.
Nadradená súčasť
Detská súčasť
V podradenom komponente dostávame rekvizity a správu zobrazujeme v značke „p“.
msg
Teraz po nastavení týchto dvoch komponentov. Pozdravme späť náš nadradený komponent. Aby sme sa mohli pozdraviť späť, najskôr vytvoríme tlačidlo a po kliknutí na toto tlačidlo zavoláme funkciu „helloBack“. Po vytvorení tlačidla by kód HTML podradenej súčasti bol taký
message
Vytvorme tiež funkciu „helloBackFunc“ v objekte metód. V ktorej vydáme „helloBackEvent“ spolu s premennou „helloBackVar“, ktorá obsahuje reťazec „Hello Parent“. Po vytvorení funkcie by bol javascript podradenej zložky taký
S ukončením akcie sme skončili. Prejdime teraz k nadradenej zložke na počúvanie udalosti.
V nadradenej súčasti môžeme jednoducho počúvať udalosť, rovnako ako počúvame udalosť kliknutia. Jednoducho si udalosť vypočujeme v značke ChildComponent a zavoláme na ňu funkciu „thanks ()“.
Vo funkcii thanks pridelíme odovzdaný reťazec premennej s názvom „thanksMessage“. Po vytvorení funkcie a priradení odovzdaného reťazca k premennej by javascript „parentComponent“ vyzeral takto
A zviažte niekde v šablóne premennú „thanksMessage“, aby ste videli, či to funguje alebo nie.
Nadradená súčasť
thanksMessage
Detská súčasť
Po vytvorení a napísaní celého tohto kódu prejdite na webovú stránku a znova ju načítajte, aby ste získali najnovšie funkcie.
Vidíme, že rekvizity sa úspešne prenášajú do detskej zložky. Teraz, keď klikneme na tlačidlo, ktoré je v skutočnosti v podradenej súčasti. Poďakovanie by sa malo zobraziť hneď za nadpisom nadradeného komponentu.
Ako vidíte, je zobrazený.
Takto teda môžeme emitovať alebo spúšťať vlastné udalosti a počúvať ich v niektorých ďalších komponentoch vo Vue.js.
Zhrnutie
V tomto článku sme sa naučili vysielať vo Vue vlastné udalosti.js. Tento článok obsahuje krok za krokom správny príklad na jeho pochopenie spolu so stručným vysvetlením. Dúfame teda, že tento článok pomôže pri vytváraní lepších a jasnejších koncepcií vysielania vlastných udalostí vo Vue.js. Ak chcete získať viac užitočného obsahu, pokračujte v návšteve linuxhint.com
