Workshop 2.5

Tworzenie i rejestrowanie komponentów.

Zadanie 1:

• Utwórz komponent MyButton jako funkcjonalny komponent. Wykorzystując poznane opcje w komponentach funkcjonalnych, przekaż listenery, atrybuty i klasy do root elementu tego komponentu jakim powinien być . Dodaj props np. label i przekaż mu z poziomu parenta value: "Zapisz". Wykorzystaj swój komponenty na widoku dodawania nowego pracownika. Utwórz computed properties, który będzie walidował zawartość formularza (wszystkie pola) i zwracał typ Boolean. Następnie za pomocą tego computed properties, dodawaj bądź usuwaj atrybut disabled z komponentu MyButton

Zadanie 2:

• Utwórz komponent ClearButton, jako normalny komponent SFC (*.vue). Wewnątrz komponenty na natywny listener @click (v-on:click) na tym przycisku, wyemituj do parenta event np. onClick, nastepnie na poziomie parenta (w formularzu), nasłuchując na customowy event onClick, wyczyść dane całego formularza.

Zadanie 3:

• Utwórz komponent MyLabel. Jego root elementem niech będzie span. Dodaj dwa propsy: text (typu: String, default: "") i count (typu: Number, default: 0) ale sposobem props validations, czyli jako obiekty z polami: type i default. Następnie wewnątrz elementu span wyrenderuj wartość z propsów w dowolny sposób. Dodaj natywny listener @click i wyemituj customowy emit do parenta z przekazaną wartością z propsa text. Następnie w parencie (formularzu) utwórz dwie reaktywne zmienne np. title: 'Jakis tytuł formularza', clickCount: 0. Zaimportuj komponent MyLabel i użyj go w formularzu jako tytuł. Przekaż odpowiednie propsy oraz do listenera nasłuchującego na customowy emit z tego komponentu, przypisz metodę, która zrobi inkrementacje clickCount (++) i odwróci wartość ze zmiennej title (reverse()). Ta metoda powinna się wywołać na każde kliknięcie w tytuł formularza.