Uvod

emit-props

U okviru Vue.js svaka komponenta ima svoj izolovani domen, direktna komunikacija izmedju dve komponente po default-u nije dozvoljena, tako da se za razmenu podataka koriste odgovarajuće mehanizmi.
Komunikacija izmedju parent i child komponente može da se odvija u oba smera ali koristeći različite mehanizme. U smeru od parenta ka child komponenti podatak se prosledjuje kroz atribut child taga, a u smeru od child komponente ka parent komponenti se prosledjuje uz custom event.

Treba naglasiti da u zavisnosti od tipa prosledjenog podatka zavisi da li je komunikacija jednosmerna ili dvosmerna. U slučaju podataka primitivnog tipa ova komunikacija je jednosmerna, jer child komponenta čak i da napravi promenu nad prosledjenim podatkom to neće uticati na parent komponentu. Medjutim ako se proslede podaci referentog tipa (nizovi ili objekat), onda promena takvog podatka u child komponenti će se primetiti i iz roditeljske komponente jer obe “posmatraju” isto mesto u memoriji.

Ukoliko se pak kao podatak prosledi metoda iz parent komponente, i ako ta metoda menja neki podatak iz parent komponente, onda pozivanjem prosledjene metode iz child komponente takodje menjamo taj podatak u parent komponenti.

Slanje podataka tip: parent -> child

a) Prosledjivanje podatka iz parent komponente

U mehanizmu za prosledjivanju podataka od roditeljske komponente ka child komponenti, podatak se prosledjuje kroz atribut HTML elementa (custom tag elemenat predstavlja instancu child komponente).

String

Ukoliko želimo da prosledimo statički string koji se neće menjati:

Medjutim kada prosledjujemo primitivni podatak koji se dinamički menja, da bi bio reaktivan moramo da koristimo direktivu v-bind:

Sa ovakvim pristupom svaki put kada roditeljska komonenta bude ažurirana sva “prop” svojstva će takodje biti ažurirana.

Number

Za razliku od stringa props koji prosledjuje brojeve mora da bude bind-ovan i za statički i dinamički props:

Boolean vrednost

Props svojstvo koje prosledjuje boolean-ovu vrednost takodje mora biti bind-ovano i za statičku i za dinamički vrednost.

NAPOMENA:
U slučaju prosledjivanja “props” atributa bez definisane vrednosti, Vue.js smatra da je u pitanju booleanova vrednost TRUE:

Objekat/Array

Kao i za sve ostale tipove, osim String-a “props” svojstvo mora biti bind-ovano i za statičku i dinamičku vrednost.

Array

Object

b) Prihvatanje podatka u child komponenti kroz “props” svojstvo

Da bi child komponenta mogla da iskoristi prosledjeni podatak, potrebno je da ga specifično označi tako što će da ga deklariše kroz svojstvo “props”. Unutar child komonente se kroz svojstvo “props” deklariše koji tip podataka očekuje da joj se prosledi, mogu da se koriste sledeće sintakse:

Array sintaksa

Objekatna sintaksa

Za razliku od “Array sintakse” “objektna sintaksa” omogućava i validaciju tipa podataka koji se očekuje da bude prosledjen:

NAPOMENA:
Nazivi HTML atributa su case-insensitive, tj. browser-i ne razlikuju velika od malih slova. Medjutim Vue.js dozvoljava da se imena “props” atributa pišu kao “camelCase” jer ih obradjuje i od njih generiše “kebab-case” ekvivalente (koji mogu da se koriste u okviru HTML).

Primer

U ovome primeru u okviru JavaScript-a se definiše props svojstvo “postTitle” koristeći “camelCase” pravilo

Medjutim u okviru HTML-a se koristi “post-title” “kebab-case” ekvivalent:

BONUS Savet:

U slučaju da su nam potrebne vrednosti prosledjenih svojstva kao inicijalne vrednosti preporuka je da definišemo lokalnu promenjivu:

Primer

U ovome primeru parent komponenta prosledjuje preko atributa “podatak” vrednost “brojača”, dok child komponenta taj prosledjeni podatak prihvata kroz istoimeno “props” svojstvo. U ovom primeru je obradjeno samo prosledjivanje podataka iz parent komponente, stoga pri menjanju brojača iz child komponente to neće uticati na vrednost u parent komponenti. Ustvari menjanje vrednosti brojača unutar child komponente je privremeno, jer nakon novog ažuriranja brojača iz parent komponenete, podatak u child-u će se sinhronizovati sa parent komponentom i tako “pregaziti” sve svoje promene napravljene iz child komponente.

Da bi se neki podatak uvek sinhronizovao izmedju parent i child komponente potrebno je da se promene iz child komponente prosledjuju parent komponenti, što je i objašnjeno u sledećoj sekciji.

Slanje podataka tip: child -> parent

Prosledjivanje podataka od child komponente ka roditeljskoj komponenti se vrši tako što emitujemo custom dogadjaj uz koji prosledjujemo i željene podatke. Stoga je potrebno da u okviru roditeljske komponente da osluškujemo taj specifični dogadjaj i kada ga komponenta primeti treba da pokupi prosledjeni podataka.

a) Emitovanje dogadjaja iz child komponente

Dogadjaj se emituje iz child komponente sa naredbom:

Treba napomenuti da je child komponenta i dalje potpuno odvojena od onoga što se dešava izvan nje, ona samo izveštava o sopstvenoj aktivnosti (u slučaju da roditeljsku komponentu to interesuje).

b) Osluškivanje custom dogadjaja u parent komponenti

Osluškivanje ovako emitovanog dogadjaja je potpuno isto kao i osluškivanje bilo kog drugog dogadjaja. Za osluškivanje se koristi standardna direktiva “v-on:” v-on:nazivCustomDogadjaja="nekiEventHandler", koja se kači na child tag u okviru parent komponente. Prosledjenom podatku se pristupa preko specifične promenjive $event:

Primer: parent komponenta

Primer

U ovome primeru je pored prosledjivanja podatka iz parent komponente, nakon izmene u child komponenti je emitovan dogadjaj da obavesti parent komponentu i poslat joj je novi podatak. Parent komponenta zatim ažurira taj podatak i ispisuje promenu.


Podelite:

Ostavite komentar