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:



Šta su Vue.js komponente?

Kreiranje komponente

Poznato je da čak i kod najjednostavnijih aplikacija nije dobro držati ceo kod u jednom fajl, već je bolje razbiti ga na više celina jer se na taj način pojednostavljuje aplikacija i omogućava bolja preglednost kao i lakši debuging. Upravo su komponente odličan način da se razbije kompleksnost aplikacije na manje delove. Pored toga komponente nam omogućavaju da enkapsuliramo kod naš kod, kao i da ga možemo koristiti više puta u aplikaciji (reusable kod).

U suštini komponenta predstavlja jedan options objekat Vue instance. Ukoliko nam je dostupna ES6 sintaksa i korišćenje modula, onda je dobro taj options objekat izdvajiti u zaseban fajl. Taj fajl u okviru Vue.js framework-u ima specijalnu ekstenziju .vue, a naziv po konvenciji mora da započinje velikim slovom i sastoji se iz tri sekcije: template, script, style.

Primer: ButtonCounter.vue

Prednosti korišećenja komponenti su sledeće:

  • Syntax highlighting
  • Component-scoped CSS
  • Preglednija aplikacija zbog modularnog programiranje

NAPOMENA:

Za Vue verziju 2.0 template sekcija mora da ima samo jedan root element, u susprotnom Vue.js izbacuje error.

Prethodni primer izbacuje error, jer postoje dva root elementa u okviru template. Rešenje je da stavimo oba elementa u zajednički wrapper element:

Registrovanje komopnente

Da bi mogli implementirati kreiranu komponentu u našu aplikaciju (ili u drugu komponentu) potrebno ju je registrovati (mora da ima konstruktorsku funkciju na osnovu koje se generiše).

a) Globalno registrovanje komponente

Globalno registrovanje komponente nam omoućava da komponentu koristimo iz različitih Vue instanci ili drugih komponenti. Komponentu registrujemo koristeći component() metodu. Ova metoda prihvata dva argumenta: naziv tag-a i options objekat:

Primer

See the Pen
Untitled
by Web programiranje (@chos)
on CodePen.

Primer

b) Lokalno registrovanje komponente

Za razliku od globalne registacije komponente, kada su komponente dostupne svim drugim komponentama, kod lokalno registrovane komponente sadržaj jedne komponente nije odmah dostupan u okviru druge komponente, potrebno je dodatno importovati i lokalno registrovati komponentu.
Pri lokalnoj registraciji se ne koristi metoda component() nego components svojstvo. To svojstvo je objekat kroz koji se definišu sve lokalne komponente u vidu paraova key/value. Kroz key se definiše naziv komponente, a value ukazuje na promenjivu koja predstavlja options objekt:

ili da izdvojimo options objekat (važno kod “Single File Component”)

“data” svojstvo u Vue komponenti

Svojstvo “data” u komponentama ne može da bude običan objekat, jer je Vue.js dizajniran da u tom slučaju izbaci error. Razlog zbog čega Vue.js sprečava takvu sintaksu (koja je inače regularna za u okviru Vue instance), je taj što bi se tako definisan objekat delio u svim kreiranim instancama! Da bi se to izbeglo potrebno je da podatke deklarišemo kao funkciju koja vraća objekat sa data svojstvima, nakon čega će svaka instanca komponente dobiti svoju novu kopiju početnog “data” objekta.

ili ako smo u mogućnosti da koristimo ES6, možemo napisati jednostavanije:

Primer

See the Pen Komponente by Web programiranje (@chos) on CodePen.

NAPOMENA:
Kada bi smo ipak želeli da delimo isti data objekat kroz više instanci, postoji način da “zaznemo” Vue.js. Potrebno je da izvučemo data objekat izvan vue istance i dodelimo ga nekoj promenjivoj, pa data svojstvu ukažemo na tu promenjivu:

See the Pen Komponente i zajedniki data objekat by Web programiranje (@chos) on CodePen.

Ukoliko bi vratili data objekat u instancu, svaka komponenta bi tada imala svoj data objekat, nakon čega bi brojači bili razdvojeni.

Primer

See the Pen
Lokalne komponente
by Web programiranje (@chos)
on CodePen.

NAPOMENA:

Kada se koristi single file komponenta ona se nalazi u zasebnom fajlu pre registrovanja je neophodno da je prvo importujemo (pogledaj primer):

Implementacija komponente u HTML

<template> tag

Vue aplikacija može da ubaci novi element u HTML. Mesto dodavanja novog HTML elementa se obeležava sa ubacivanjem <template></template> taga:

Ovaj element ne postoji sve dok se ne kreira Vue instanca. Sa čime će se zameniti template tag kada se kreira Vue instanca se definiše u okviru “template” svojstva instance:

Primer

See the Pen
Vue template
by Web programiranje (@chos)
on CodePen.

<Komponent> tag

Komponente se slično implementiraju kao i <template> tag, dovoljno je ugraditi custom tag sa nazivom komponente i on će sa sobom “doneti” svoje HTML elemente, svu logiku, i stajling definisan u komponenti.

U aplikaciji se mogu koristi više instanci iste komponente, za to je dovoljno da se tag sa nazivom komponente ubaci na više mesta u okviru samog HTML-a.