Vue

Vue.js Emit egyéni eseményeket

Vue.js Emit egyéni eseményeket

Vue.A js sokoldalú és teljes körű keretrendszer hatalmas webes alkalmazások felépítéséhez. Bármely webalkalmazás fel van osztva a Komponensekre. Például egy egyszerű webhely, amely fejlécet, oldalsávot és néhány más összetevőt tartalmaz. Ennek az összetevő-alapú megközelítésnek a kezelése és kezelése érdekében a Vue.A js felajánlja a szülő-gyermek viszonyt az összetevők között, és ha néhány adatot el akarunk küldeni az összetevők között. Vue.js javaslatot tesz arra, hogy adatokat küldjön a szülőtől egy gyermek alkotóelemhez, de adatokat küldjön a gyermektől a szülőhöz; egyedi eseményeket kell kiadnunk. Ebben a cikkben megismerhetjük az egyedi események kilövését és meghallgatását.Először nézzük meg, hogyan indíthatunk egyedi eseményeket a Vue-ban.js, majd hogyan hallgassuk meg az eseményt. Az esemény Vue-ban történő indításának szintaxisa.js van

ez.$ emit ('eventName')

Ebben a szintaxisban óvatosnak kell lennünk, miközben nevet adunk az eseménynek, mert ugyanazt a nevet használjuk; később meghallgatjuk ezt az eseményt. Annak érdekében, hogy meghallgassuk ezt az eseményt, meghallgathatjuk, miközben egy kattintási eseményt hallgatunk a Vue-ban.js. Például

Bármely kifejezést írhatunk a fordított vesszőkbe, valamint egy függvényt. Tehát próbáljunk meg egy példát, hogy jobban megértsük.

Példa

Tegyük fel, hogy van egy „parentComponent” nevű komponensünk, amely tartalmaz egy gyermekkomponentust a „childComponent” nevével, amelynek props segítségével üzenetet adunk.


A gyermek alkotóelemben kellékeket kapunk, és az üzenetet a „p” címkében mutatjuk be.


Miután beállította ezt a két komponenst. Köszönjünk vissza ParentComponentünknek. Ahhoz, hogy köszönj vissza, először létrehozunk egy gombot, és ennek a gombnak a kattintására meghívjuk a „helloBack” funkciót. A gomb létrehozása után a gyermek komponens HTML-je ilyen lesz

Hozzuk létre a „helloBackFunc” függvényt a Method objektumban is. Ebben kiadjuk a „helloBackEvent” -t, valamint a „helloBackVar” változót, amely tartalmazza a „Hello Parent” karakterláncot. Funkció létrehozása után a gyermek komponens javascriptje ilyen lenne

Befejeztük az esemény kilövését. Most térjünk át a szülő komponensre az esemény meghallgatásához.

A Szülő komponensben egyszerűen meghallgathatjuk az eseményt, akárcsak a kattintási eseményt. Egyszerűen meghallgatjuk az eseményt a ChildComponent címkéjében, és meghívjuk rajta a „thanks ()” függvényt.

A köszönet függvényben a továbbított karakterláncot hozzárendeljük a „thanksMessage” nevű változóhoz. Miután létrehozta a függvényt és hozzárendelte az átadott karakterláncot a változóhoz, a „parentComponent” javascriptje ilyen lenne

És kösse valahova a sablonban található „thanksMessage” változót, hogy lássa, működik-e vagy sem.

Miután létrehozta és megírta ezt a kódot, lépjen a weboldalra, és töltse be újra a legújabb funkciók eléréséhez.

Láthatjuk, hogy a kellékeket sikeresen továbbítják a gyermek komponenshez. Most, ha rákattintunk a gombra, amely valójában a gyermek komponensben található. A köszönő üzenetet közvetlenül a szülő komponens címsora után kell megjeleníteni.

Amint láthatja, megjelenik.

Tehát így bocsáthatjuk ki vagy indíthatjuk el az egyedi eseményeket, és hallgathatjuk meg őket a Vue más komponenseiben.js.

Összegzés

Ebben a cikkben megtanultuk egyedi események kibocsátását a Vue-ban.js. Ez a cikk lépésről lépésre megfelelő példát tartalmaz annak megértéséhez, rövid magyarázattal együtt. Reméljük, hogy ez a cikk segít abban, hogy jobb és egyértelműbb koncepciók legyenek az egyedi események kibocsátásáról a Vue-ban.js. További ilyen hasznos tartalmakért látogasson el a linuxhint oldalra.com

Telepítse a legújabb OpenRA stratégiai játékot az Ubuntu Linux rendszerre
Az OpenRA egy ingyenes / ingyenes valós idejű stratégiai játékmotor, amely újjáépíti a korai Westwood játékokat, mint például a klasszikus Command & C...
Telepítse a legújabb Dolphin Emulator for Gamecube & Wii szoftvert Linuxra
A Dolphin Emulator segítségével a kiválasztott Gamecube & Wii játékokat játszhatja Linux személyi számítógépeken (PC). Mivel a Dolphin Emulator szaba...
A GameConqueror Cheat Engine használata Linux alatt
A cikk tartalmaz egy útmutatót a GameConqueror csaló motor Linux alatt történő használatáról. Sok olyan felhasználó, aki Windows-on játszik játékot, g...