Šta su komponente?

vue komponente

Definicija

Komponente su jedna od najmoćnijih funkcija Vue.js i odličan način da se razbije kompleksnost aplikacije na manje delove. Komponente nam pomažu da enkapsuliramo kod koji se može koristiti više puta u aplikaciji (“reusable” Vue instance). Svaki custom HTML tag koji predstavlja instancu komponente mora da ima konstruktorsku funkciju na osnovu koje se generiše, a takvo definisanje konstruktorske funkcije komponente se naziva registrovanje komponente.

Implementacija komponenti u aplikaciju

Nakon definisanja konstruktora komponente, implementacija novih instanci u aplikaciji je veoma jednostavna. Za implementaciju je dovoljno ugraditi custom tag sa nazivom komponente u okviru HTML-a i on će sa sobom “doneti” svoje HTML elemente, svu logiku, i stajling definisan u komponenti.

Primer

Komponente mogu imati više instanci, što se može videti u narednom primeru, gde se komponeta integriše u HTML na dva mesta, sa custom tagom <button-counter></button-counter>:

Registrovanje komponente

a) Globalno registrovanje komponente

Globalno registrovanje komponente nam omoućava da komponentu koristimo u više 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

b) Lokalno registrovanje komponente

Lokalno registrovanje komponente podrazumeva da se komponenta koristi samo u skolopu jedne Vue instance. Za registrovanje se ne koristi metoda component() nego components svojstvo. Svojstvo components 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.

Single fajl komponente

Definicija

Ukoliko nam je dostupna ES6 sintaksa, i korišćenje modula, onda možemo da options objekat izdvajimo u poseban fajl. Taj fajl u okviru Vue.js framework-u ima specijalnu ekstenziju .vue, a naziv po konvenciji mora da započinje velikim slovom.

PREDNOSTI:

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

Struktura Single File komponente

Fajl sa ekstenzijom .vue (tzv. SingleFileComponent) se sastoji iz tri sekcije: template, script, style.

1) Template sekcija

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:

2) Script sekcija

U okviru “script” sekcije se nalazi standardni JavaScript koji podržava ES6+ standarde, stoga je neophodno exportovati ovu sekciju. Više o ovome pročitajte u članku “Modularno programiranje sa ES6”.

3) Style sekcija

Sekcija “style” se koristi da se definiše CSS i tako stilizuje komponenta. Preporuka je da se izbegne globalno stilizovanje iz same komponente, stoga ukoliko stilizujemo potrebno je da naglasimo da je stilizovanje samo za tu komponentu. To se postiže sa dodavanjem atributa scoped

Izuzetak od ovoga pravila je korišćenje BEM nomenklature (više o BEM nomenkalaturi pogledajte ovde. Ukoliko pak želimo da korisitimo SASS dovoljno je da dodamo atribut koji definiše jezik lang=”scss”

Primer: ButtonCounter.vue

Registrovanje single file komponente

Single file komponenta ustvari predstavlja options objekat konstruktorske funkcije, koji je neophodan za registrovanje komponente (bilo za lokalno ili globalno). Stoga je neophodno da importujemo single file komponentu u fajl gde se registruje komponenta:

Primer – globalno registrovanje

Primer – lokalno registrovanje


Pogledajte slične članke...

Podelite:

Ostavite komentar