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"

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

dinamicke 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>.

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.

Pogledajte slične članke...

Podelite:

Ostavite komentar