Kurs Vue.js krok po kroku – Komponenty

Po serii podstaw dzisiaj wreszcie możemy przejść do czegoś co jest w zasadzie kluczowe w całej idei Vue.js czyli do komponentów.

Czym są komponenty

Zobacz na dowolną stronę www. Na ogół składa się ze stałych elementów. Mamy nagłówek, nawigację, jakąś treść i stopkę. Do tego właśnie możemy użyć komponentów. Mogą to być elementy jednorazowe ale też i takie powtarzane wielokrotnie jak np. listy z treścią. I tu właśnie tkwi siła w wielokrotnie wykorzystywanych komponentach. Definiujemy jakiś fragment np. element z tytułem autorem, datą i zajawką wpisu blogowego i możemy go w prosty sposób wykorzystywać w naszej aplikacji wielokrotnie.

W późniejszych lekcjach nauczymy się zagnieżdżać komponenty czy komunikować się między nimi. Dzisiaj zajmiemy się samymi podstawami.

Definiowanie komponentu

Trzymajmy się przykładu z listowaniem notek na blogu. Powiedzmy, że chcemy uzyskać docelowo taką konstrukcję:

<div class="entry">
    <p>Tytuł wpisu</p>
    <p>Data</p>
    <p>Autor</p>
</div>

Zdefiniujmy sobie komponent:

Vue.component('blog-entry', {
  data() {
    return {
      title: 'Tytuł',
      date: 'Data',
      author: 'Mirek'
    }
  },
  template: `
  <div class="entry">
    <p>{{ title }}</p>
    <p>{{ date }}</p>
    <p>{{ author }}</p>
  </div>
  `
});

Nazwaliśmy komponent blog-entry i od tego momentu możemy go użyć w naszym HTMLu jako

<div id="app">
  <blog-entry></blog-entry>
</div>

Jak zauważyłeś w komponencie też mamy sekcję data. I tutaj dosyć istotna informacja w kontekście tego samego w instancji Vue.js. O ile tam data to był obiekt, o tyle w komponentach jest to funkcja, która zwraca obiekt.

W zmiennej template umieszczamy naszego wcześniej ustalonego HTMLa. Tutaj uwaga nr 2: pamiętaj, że każdy template musi mieć jeden nadrzędny element co sprowadza się po prostu do objęcia naszej treści jakimś nadrzędnym divem.

W ten prosty sposób uzyskaliśmy komponent blog-entry który możemy wielokrotnie używać w naszej aplikacji. Jak pewnie zauważyłeś nie jest to jakieś specjalnie piękne i przy wielu komponentach, rozbudowanej aplikacji zrobiłoby się z tego przynajmniej spaghetti. Ciężkie w pisaniu, utrzymywaniu i zrozumieniu.

Spokojnie! Mam dobra wiadomość: dochodzimy do siły i prostoty Vue.js - w kolejnym odcinku nauczymy się jak rozbić komponenty na osobne pliki czyniąc naszą aplikację bardziej czytelną ale też ułatwiając sobie pracę.

Subskrybuj kanał na YouTube

Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Materiał pojawi się w tym miejscu w ciągu najbliższych 2 tygodni. Nie chcesz przegapić? Subskrybuj kanał na YouTube!