Prosledjivanje sadržaja sa slot elementom

Uvod

vue slot

Jedan od načina je da se prosledi sadržaj iz parent komponete je da se ubaci izmedju custom tag-a koji predstavlja instancu komponente. Ovaj mehanizam se koristi kada imamo slične komponente koje se razlikuju samo po sadržaju, jer tako izbegavamo pravljenje dve odvojene komponente.
Child komponenta prihvata prosledjen sadržaj, a “slot” elemenat joj definiše mesto u komponenti gde treba da se ubaci prosledjeni sadržaj.

Primer


Neimenovani slot

Ovo je najednostavniji način da se iz root Vue instance (ili parent komponente) prosledi neki sadržaj child komponenti. Taj sadržaj se prosledjuje imedju HTML taga-ova koji predstavlja instancu child komponente. Već je pomenuto da će sadržaje biti iskorišćen pri renderovanju instance na mestu gde se nalazi <slot></slot> elemenat.

Root instanca:

Komponenta

Komponenta prihvata prosledjeni sadržaj i prikazuje ga na mestu slot taga

Kada se komponenta bude renderovala na mesto slot taga će doći prosledjeni sadržaj.

NAPOMENA:
Stilizovanje umetnutog sadržaja mora biti stilizovano iz child komponente.

Komponenti može da se prosledi i dinamički sadržaj:

Primer

A takva komponenta potpuno isto prihvata prosledjeni sadržaj i prikazuje ga na mestu slot taga. Stoga će na mestu HTML taga slot biti izrenderovan dinamički sadržaj, što je u ovom slučaju “<h3>Something bad happened.</h3>”

Imenovani slot

U slučaju da postoje više slotova, potrebno je svakom slot-u dodeliti naziv da bi se medjusobno razlikovali:

Root instanca

Komponenta

Komponenta prihvata prosledjeni sadržaj i prikazuje ga na mestu odgovarajućeg slot taga:

Podrazumevani slot

Treba naglasiti ukoliko jedan od slotova nema definisano ime on će se ponašati kao tzv. default-ni slot koji obeležava mesto gde će biti prikazan sav prosledjen sadržaj koji nije specifično obeležen.

Root instanca

Komponenta

Imenovan slot “<slot name="title"></slot>” prihvata svoj sadržaj u tagu koji je obeležen sa atributom slot=”title”, dok neimenovani slot prihvata sav neobeleženi prosledjeni sadržaj:



Uvod u Vue.js komponente

Šta su komponente?

vue komponente

Definicija

Komponente su jedna od najmoćnijih funkcija Vue.js i odličan način da se razbije kompleksnost aplikacije na manje delove. Komponente nam pomažu da enkapsuliramo kod koji se može koristiti više puta u aplikaciji (“reusable” Vue instance). Svaki custom HTML tag koji predstavlja instancu komponente mora da ima konstruktorsku funkciju na osnovu koje se generiše, a takvo definisanje konstruktorske funkcije komponente se naziva registrovanje komponente.

Implementacija komponenti u aplikaciju

Nakon definisanja konstruktora komponente, implementacija novih instanci u aplikaciji je veoma jednostavna. Za implementaciju je dovoljno ugraditi custom tag sa nazivom komponente u okviru HTML-a i on će sa sobom “doneti” svoje HTML elemente, svu logiku, i stajling definisan u komponenti.

Primer

Komponente mogu imati više instanci, što se može videti u narednom primeru, gde se komponeta integriše u HTML na dva mesta, sa custom tagom <button-counter></button-counter>:


Continue reading…