Uvod
Komunikacija izmedju “susednih” komponenti se može ostvariti na više načina, a izbor jednog od ponudjenih mehanizma najčešće zavisi od komplikovanosti aplikacije.
a) Komunikacija preko zajedničkog roditelja ($emit -> $on & atribut -> props )
Izvodljivo rešenje, ali je generalno loša ideja, jer se teško prati protok podataka a samim tim je otežano debag-ovanje.
b) Event bus ($emit & $on)
Brzo i jednostavno rešenje za aplikacije sa jednostavnom arhitekturom i manjim brojem komponenti.
c) Vuex (centralizovani state menadžment)
Kompleksno rešenje za kompleksne aplikacije
Komunikacija preko zajedničkog roditelja
Komunikacija izmedju dve susedne komponente može da se odvija preko zajedničke parent komponente koristeći već objašnjeni princip komunikacije “parent <---> child” u članku “Komunikacija izmedju komponenti tip parent <---> child”.
Postupak se zasniva na tome da se iz obe komponente emituje odgovarajći podatak kroz custom dogadjaje, dok bi za to vreme roditeljska komponenta trebala da prati promene. Nakon svake promene roditelj bi trebao da kroz atribut prosledi promenjene podatke child komponenti. A komponenta bi trebala da prihvati prosledjene podatke kroz props svojstvo.
Event Bus
Event Bus je mehanizam koji umesto zajedničkog roditelja koristi centralni objekat, čija je namena samo prenošenje poruka izmedju komponenti. Kod Vue.js taj centralni objekat je ustvari nova Vue.js instanca. Postupak je jednostavan: jedna komponenta emituje custom dogadjaj i uz njega prosledjuje neki podatak, dok druga komponenta osluškuje taj custom dogadjaj i prikuplja podatke poslate uz njega.
1) Kreiranje EventBus-a
Nova instanca koja se koristi kao most za prosledjivanje podataka i može da se definiše u istom fajlu gde je i glavna Vue instanca:
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import Vue from "vue"; import App from "./App"; /* Event Bus instanca */ export const eventBus = new Vue(); /* root instanca */ new Vue({ el: "#app", components: { App }, template: "<App/>" }); |
NAPOMENA:
“Event Bus instanca” mora biti definisana pre “root instance”
EventBus instancu takodje možemo izdvojiti u novi JavaScript ES6 modul:
eventBus.js
|
1 2 3 |
import Vue from 'vue'; export const EventBus = new Vue() |
2) Emitovanje dogadjaja i prosledjivanje podatka
U željenoj komponenti možemo da emitujemo dogadjaj i uz njega da prosledimo bilo koji podatak.
|
1 2 3 4 5 |
methods: { emitovanjeDogadjaja() { EventBus.$emit("nazivCustomDogadjaja", nekiPodatak); } } |
3) Osluškivanje custom dogadjaja
U drugoj komponenti od trenutka kada se kreira komponenta, počinjemo da osluškujemo custom dogadjaj, a kada se desi iskoristimo podatak koji je prosledjeni uz dogadjaj.
|
1 2 3 4 5 |
created () { EventBus.$on("nazivCustomDogadjaja", function(prosledjeniPodatak) { console.log(prosledjeniPodatak); ); } |
NAPOMENA:
Obratite pažnju da ključna reč “this” u sklopu callback funkcije ukazuje na EventBus instancu. Stoga ukoliko u callback funkciji želite da targetirate komponentu, koristite ili arrow funkciju ili poznati mehanizam “var that = this” (više o ovome pročitajte u članku “Značenje operatora “this” u JavaScript-u”
Primer
U ovome primeru iz komonente “Child1” emitujemo dogadjaj “unosIzPrveKomponente” i uz njega prosledjujemo podatke unete kroz input polje. Komponenta “Child2” osluškuje dogadjaj “unosIzPrveKomponente” i iskorišćava prosledjeni podatak this.unos da ga dodeli data svojstvu “ispis”.
Vuex
Vuex je state management pattern + library za Vue.js. Služi kao centralizovano mesto za čuvanje vrednosti za sve komponente u aplikaciji. Vuex ima set pravila koja osiguravaju da stanje nekog svojstva može biti promenjeno na predvidljiv način. Vuex je tema za sebe i biće obradjena kasnije u nekom od narednih članaka.