Sintaksa za dinamičke komponente
Dinamičke komponente u Vue-u omogućavaju vam da navedete jedno mesto HTML-u kao placeholder za različite komponente, nakon čega user/aplikacija može dinamički birati koju želi komponentu da prikaže. Sintaksa dinamičkih komponenti veoma liči na sintaksu “slot” mehanizma, stim što u ovome slučaju je tzv. placeholder HTML elemenat <component></component>. Izbor željene komponente se vrši definišući vrednost specijalnog atributa v-bind:is="naziv-komponente"
1 |
<component v-bind:is="naziv-komponente"></component> |
Primer
U ovome primeru postoje 3 različite komponente koje trebaju da se “štampaju” na istom mestu u zavisnosti od želje korisnika. Korišćen je HTML tag <component></component> koji u zavisnosti od korisnikove akcije vraća odgovaraju’u komponentu.
Životni ciklus dinamičke komponente
Životni vek jedne dinamičke komponente započinje dinamičkikm prebacivanjem na komponentu a završava se učitavanjem druge komponente na istom mestu.
Primer
U ovome primeru u crvenoj komponenti su definisane metode koje štampaju poruke u zavisnosti da li je komponenta uništena ili novo-kreirana. Dodatni dokaz ponovnog učitavanja komponente pri prebacivanju sa jedne na drugu komponentu, dobijamo kada svaki put nakon povratka u crvenu komponentu primetimo da je brojač resetovan.
Keep alive dinamičke komponente
Ukoliko želimo da promenimo default-no ponašenje dinamičkih komponenti i sprečimo uništavanje i ponovno kreiranje instance komponente nakon svakog prebacivanje, potrebno je da obavijemo component tag sa specifičnim HTML elementom <keep-alive>.
1 2 3 |
<keep-alive> <component v-bind:is="naziv-komponente"></component> </keep-alive> |
Kada obavijemo našu dinamičku komponentu sa “keep-alive” elementom, komponenta se više ne uništava, stoga nam više nije dostupna ni life-cycle udica (eng. hook) destroyed(). Medjutim nakon korišćenja <keep-alive> elementa postaju nam dostupne druge dve life-cycle udice: activated() i deactivated()
Primer
U ovome primeru se može primetiti da se vrednost brojača ne resetuje nakon promene komponente. Takodje se pri svakoj promeni komponente sa da aktivira” i “deaktivira” komponenta, što se može videti u konzoli.