Vue.js: Dynamiczna podmiana komponentów

Vue.js 2.5.x

0:00Wykonaliśmy ciekawy projekt w trzech ostatnich lekcjach natomiast

0:04nie kończymy jeszcze tematu komponentów. Chciałem po prostu, abyś może się

0:08troszeczkę rozerwał, zrobił coś ciekawszego. Stąd te trzy ostatnie lekcje nie

0:12pod koniec tego działu, ale właśnie w jego środku i teraz chciałbym żebyśmy przyszli

0:17do jeszcze kilku rzeczy związanych z komponentami. Jedną z ciekawych

0:21rzeczy jest to, że możemy warunkowo wybrać jaki komponent załadujemy

0:26i nie mam tutaj na myśli tego, że damy sobie na przykład dwa komponenty i za

0:30pomocą v-if będziemy manipulować tym czy się pojawią czy nie. Ale

0:34mamy specjalny element o nazwie komponent, który będę chciał ci pokazać, natomiast najpierw

0:39zobaczymy co tutaj mamy. Troszeczkę inna strona, niż do tej pory. Mamy

0:43jakąś nawigację, mamy tutaj stopkę, a pomiędzy tym jest sekcja główna. Wygląda

0:48to w ten sposób i chciałem teraz jeszcze zerknąć na to

0:52co mamy niżej. Mamy edu home. To jest komponent nowy, który stworzyłem, bardzo

0:56prosty. Zobacz co tutaj się wydarzy kiedy ja ten komponent osadzę,

1:00okej i zapisuje,

1:04odświeżymy tutaj i jak widzisz mamy coś takiego. Panel administracyjny. Skorzystaj

1:08z nawigacji powyżej, czyli to będzie jakaś strona główna naszej aplikacji

1:12która będzie mieć kilka widoków. Zatem bardzo prosta rzecz, tutaj nie ma żadnej logiki. No

1:17i edu users to są nasi użytkownicy, których mieliśmy, korzystający również

1:21z pojedynczego elementu edu user. Tutaj nie ma w tym momencie nic

1:25nowego. Natomiast chciałbym móc zrobić tak, że po kliknięciu na home

1:29będzie wczytywany ten widok, a po kliknięciu tutaj w użytkownicy będziemy

1:34ładowali widok z users, czyli generalnie będziemy chcieli Home

1:38zamienić na users w ten oto sposób. Oczywiście to

1:42nam nie zadziała, jeszcze dlatego, że tutaj musimy przekazać jak zapewne pamiętasz, users,

1:47okej i

1:51teraz powinno zadziałać. Tak też się dzieje, możemy edytować tych użytkowników i tak

1:56dalej będę chciał to teraz zmienić, więc mamy taki specjalny element,

2:00który się nazywa komponent. W ten oto sposób. Jemu

2:05też możemy przekazywać props, tak samo jak w tym miejscu, chociaż powiem ci szczerze, że w przypadku

2:09korzystania z tego komponentu raczej będziemy troszeczkę robić to inaczej,

2:13czyli users chyba bym nie przekazywał wtedy w tej głównej aplikacji tutaj,

2:18ale zrobiłbym tak, że dokładnie ten komponent edu users

2:22jakoś by sobie pobierał. Miałby je tutaj zapisane w data czy później mógłby je

2:26pobierać Ajax'em. Na razie jednak zostawimy to w ten sposób. Natomiast jest jeden bardzo

2:30ważny atrybut, który przypisujemy do tego komponentu, jest to atrybut is. Tutaj

2:35możemy podać nazwę komponentu jaki chcemy wczytać i jeżeli wpiszę tutaj edu home.

2:39Zobacz, to wczyta nam się właśnie ten pierwszy

2:44komponent. Natomiast jeżeli wpiszę edu users to

2:48wczyta nam się drugi komponent i co ciekawe jak wszystkie atrybuty, możemy

2:53również is zbindować, żeby był dynamiczny i wtedy tutaj ta wartość nie będzie

2:57brana dosłownie bo musiałbym ją wpisać ten sposób, tylko możemy tutaj podać jakąś

3:02właściwość, która się będzie znajdowała w naszej głównej aplikacji. Ja chciałbym ją nazwać

3:07Vue, przejdziemy sobie do tej głównej aplikacji i wiem, że tutaj jest sporo kodu,

3:11ale zobaczysz jeszcze w tym kursie sposoby na to, żeby rozdzielić to

3:15na wiele różnych plików. Tutaj jest nasza główna aplikacja i w data chciałbym dodać coś

3:19takiego jak Vue i domyślnie niech to będzie edu home,

3:23powiedzmy, okej, działa i teraz

3:27wystarczy, że zmienimy Vue, która jest w tym miejscu, co za tym idzie

3:31na tym elemencie komponent tutaj również się to zmieni i

3:35będziemy mogli załadować inny widok w sposób dynamiczny, więc

3:39tutaj przygotowałem dwa przyciski są to elementy a i po ich kliknięciu

3:43będę chciał właśnie zmienić sobie ten widok, więc przypiszemy zdarzenie click i

3:47od razu zrobię prevent po to, żeby ten hash nie dodawał się do adresu,

3:52czyli zapobiegniemy domyślnej akcji przeglądarki i tutaj można wykonać jakąś metodę

3:56lub wpisać wyrażenie. Ja będę chciał zrobić coś takiego, Vue równa

4:00się i przepisze my tutaj edu home i zrobimy

4:04to samo dla linku, który jest poniżej, okej i

4:08tutaj zrobimy edu users. Powinno

4:13nam to już zadziałać, czyli po kliknięciu w ten przycisk zmieniamy Vue na naszej głównej aplikacji,

4:18bo to w jej templatce teraz jesteśmy, więc kontrolujemy właśnie te właściwości

4:22i ważne żeby tutaj były takie od apostrofy, że ta wartość jest to

4:26string, a nie w żaden sposób inne wyliczona wartość, okej. No

4:30i teraz jeżeli kliknę tutaj odśwież. Jak widzisz, wygląda to tak samo, ale jeżeli

4:34kliknę użytkownicy to będziemy mogli zmienić widok w taki

4:38oto dynamiczny sposób, co ważne, takie widoki będzie również można zmieniać za

4:42pomocą Vue Router, który ci jeszcze w tym kursie pokaże natomiast Vue Roter jest

4:47taką biblioteką third-party powiedzielibyśmy, czyli osobną

4:51od samego Core Vue, a to co ci teraz pokazuje działa domyślnie właśnie w Vue,

4:56więc taką nawigację możesz bez użycia jakiś dodatkowych pluginów również sobie

5:00zaimplementować z tym, że różnica jest taka od Vue Router, że tutaj nie

5:04zmieniamy po prostu adresu URL, ale komponenty się zmieniają no

5:08i oczywiście gdybyśmy sobie to podejrzeli tutaj przejdziemy do tej

5:12sekcji głównej, to one są w całości usuwane i wstawiane, czyli table jak widzisz

5:17tutaj jest. Jeżeli to podmienimy w całości tutaj table zniknęło i pojawił

5:21się inny element. Tutaj jest tylko taki problem, że user zostało przypisane jako

5:25taki atrybut dlatego że przekazujemy do tego komponentu users,

5:29a jeżeli wczytuje się tutaj edu home, to on nie oczekuje na taki prop, stąd właśnie

5:34prawdopodobnie lepiej byłoby to users zapisać bezpośrednio w komponencie edu

5:39users, ale jak widzisz w ten sposób również zadziała. Mamy natomiast

5:43pewien problem, chociaż czy to jest problem to zależy od konkretnej sytuacji. Jeżeli

5:47przejdziemy do użytkowników, wybiorę tutaj edytuj. Jak widzisz pojawiło

5:51nam się takie oto pole i jeżeli teraz wrócę do home i znowu do użytkowników, to pole

5:57znika, a to nam mówi, że ten komponent został wyrenderowany w całości od nowa. Oczywiście,

6:02gdybym zaktualizował dane to nie ma takiego problemu, że kiedy go wyrenderujemy

6:06od nowa to te dane się tutaj od nowa wczytają, nie, bo te dane są

6:10przechowywane cały czas i oczywiście możemy to podejrzeć w tym miejscu. Na

6:16tym root mamy te dane, jest to ta tablica, więc w tym nie tkwi problem, ale

6:20tkwi w tym, że ten stan komponentu jaki mamy tutaj nie zostaje zachowany

6:25i nie zawsze będziesz chciał żeby był zachowany, ale gdybyś miał taką potrzebę to

6:29możemy oczywiście to zrobić. Wystarczy, że taki komponent

6:34opleciemy tagiem keep-alive, który jest przez Vue domyślnie

6:38dostępny, okej i to oznacza,

6:43że z tamtych komponentów ma być zapisywane, czyli teraz home mamy tutaj,

6:47przechodzę do edycji, wracam do home, wracam do użytkowników

6:51i jak widzisz ten stan tutaj został zachowany. Razem z tym keep-alive

6:55wiążą się jeszcze dwa lifecycle hook'i i pokazywałem

6:59już w tym kursie, że możemy zareagować na przykład kiedy komponent jest tworzony

7:03czy usuwany, więc gdybyśmy przeszli tutaj i będziemy tutaj mówić

7:08o konkretnych komponentach, bo te komponenty są tutaj podmienione,

7:12ale te hook'i musimy przypisać do każdego z nich, jeśli nas to interesuje. Zróbmy

7:16to na komponencie users, być może jeszcze pamiętasz, że mogliśmy

7:20przypisać coś takiego jak na przykład created i to była funkcja.

7:24Ja chciałbym tutaj zrobić console.log po prostu created, ok i następnie

7:30destroyed, to był hook, w którym mówiłem ci, że się wykonuje kiedy

7:34wykonamy this destroy, ale nie tylko, zobaczmy. Musimy

7:40oczywiście otworzyć sobie konsole, nic się nie pojawiło, ale kiedy kliknę

7:44na użytkowników, komponent został utworzony, dlatego jego hook created się wykonał,

7:48ale jeżeli zmienię to na home i nie mielibyśmy

7:52keep-alive, bo to też jest ważne. Gdyby tego keep-alive tutaj nie

7:57było. Jeszcze raz to zróbmy, to widzimy destroyed, czyli

8:01ten komponent jest niszczony. Natomiast jeżeli jest keep-alive, to nie jest niszczony, ale

8:06czasami chcielibyśmy wiedzieć kiedy on został aktywowany z różnych powodów chcielibyśmy

8:10wiedzieć, że do niego wróciliśmy i dlatego właśnie korzystając z keep-alive

8:14dodatkowe dwa hook'i nam się pojawiają tutaj. Ja

8:18sobie może to skopiuję i pokażę ci to, będzie to hook activated

8:22i drugi to będzie deactivated,

8:27okej więc

8:31teraz jeżeli sobie to odśnieżymy, klikam użytkowników. Mamy i created i activated, teraz mamy deactivated,

8:38a nie destroyed, jak mogłeś zobaczyć i teraz znowu activated, więc w

8:42ten sposób mogę zareagować na to, żeby coś w tym komponencie

8:47zrobić, zmienić czy zaktualizować kiedy on się na stronie pojawia. Jak

8:52zatem widzisz w taki prosty sposób możemy sobie stworzyć dynamiczną aplikację i

8:56jeżeli byś troszeczkę nad tym powiedział, zrobił sobie ciekawą nawigację,

9:01jeśli chodzi o te linki i ciekawe komponenty, a szczególnie kiedy podzielisz je na wiele

9:05plików, żeby się łatwiej z tym pracowało, to naprawdę będzie można tworzyć ciekawe

9:10aplikacje w bardzo prosty sposób. Niemniej jednak do takich już większych

9:14aplikacji możemy wykorzystywać coś takiego jak Vue Routed, który poznasz jeszcze w tym kursie.