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: