Uvod
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:
|
1 2 3 |
<alert-box> <h3>Something bad happened.</h3> </alert-box> |
Komponenta
Komponenta prihvata prosledjeni sadržaj i prikazuje ga na mestu slot taga
|
1 2 3 4 5 6 7 |
Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <slot></slot> </div> ` }) |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<alert-box> <h3>{{ poruka }}</h3> </alert-box> <script> new Vue() { el: 'app' data: { poruka: "Something bad happened." } } </script> |
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
|
1 2 3 4 5 6 |
<content-box> <h1 slot="title">Naslov</h1> <div slot="content"> <p>Lorem ipsum dolor sit amet, conarchitecto cumque nostrum provident, qui rem!</p> </div> </content-box> |
Komponenta
Komponenta prihvata prosledjeni sadržaj i prikazuje ga na mestu odgovarajućeg slot taga:
|
1 2 3 4 5 6 7 8 |
Vue.component('content-box', { template: ` <div class="container"> <slot name="title"></slot> <slot name="content"></slot> </div> ` }) |
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
|
1 2 3 4 5 6 |
<content-box> <h1 slot="title">Naslov</h1> <div> <p>Lorem ipsum dolor sit amet, conarchitecto cumque nostrum provident, qui rem!</p> </div> </content-box> |
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:
|
1 2 3 4 5 6 7 8 |
Vue.component('content-box', { template: ` <div class="container"> <slot name="title"></slot> <slot></slot> </div> ` }) |