Vue.js: Tworzenie wielu slotów

Vue.js 2.5.x

0:00Rzućmy teraz okien w jaki sposób możemy stworzyć kilka slotów i nadać

0:04im odpowiednie nazwy. Ja przerobiłam naszą aplikację troszeczkę

0:08tak żebyśmy ją mogli osadzić i żeby miała troszeczkę więcej struktury. Nazwałem

0:12ten komponent edu app i zauważ, że to co mieliśmy do tej

0:17pory wewnątrz tutaj naszego głównego app teraz tego nie ma, ale

0:21za to osadziłem sobie tutaj edu app i to wszystko znajduje się w tym miejscu, jeżeli

0:25sobie to wyrenderujemy, wygląda to w następujący sposób. Powinno działać tak jak wcześniej

0:30jak widzisz dokładnie tak jest. Natomiast ta struktura została przeniesiona tutaj.

0:34Natomiast teraz chciałbym do tego edu app móc przekazywać kilka

0:39różnych rzeczy. No i pokazałem ci że jeżeli tutaj wpiszę H1, coś

0:43to to się pojawi w tym miejscu w którym wstawimy slot, więc muszę

0:47jakiś slot tutaj wstawić. No właśnie, więc może zróbmy tak, że

0:51w tym miejscu wstawimy sobie slot, to jest to co pokazywałem ci w lekcji poprzedniej. Natomiast

0:56zaraz rozszerzymy tą wiedzę i jeżeli tu coś przekażę,

1:02to to wpadnie do tego slota, czyli powinno to wyglądać tak samo, ale teraz chciałbym dać

1:06sobie jeszcze kilka innych slotów, bo chciałbym na przykład tutaj móc dodawać

1:10jakieś linki, więc wstawimy sobie tutaj kolejny slot, ale

1:14co ważne nie mogę mieć drugiego slota, który tak samo się nazywa, czyli

1:19w zasadzie jest identyczny. Jak widzisz tutaj mamy napisane, że nie może być dwa

1:23razy taki default'owy slot. Natomiast slot to można poprzez

1:27atrybut nadawać nazwy. Jeżeli napiszemy name na przykład header

1:31lub navbar, bo to tutaj będzie tutaj bardziej odpowiednie, to teraz nie powinno

1:35być żadnego błędu. Jak widzisz to co podałem tutaj wpada

1:40do domyślnego slota, czyli tego, który nie ma nazwy. Natomiast jeżeli slot

1:44ma nazwę to możemy coś prostu do niego wyrzucić i dlatego ja będę

1:48chciał sobie taki link jak jest tutaj skopiować i możemy

1:52zrobić coś takiego, że wrzucam tutaj ten link, oczywiście nie

1:57musi mieć tutaj kliknięcia, chciałbym żeby on kierował na przykład do serwisu eduweb.pl, okej.

2:10No i teraz jeżeli nic więcej nie zrobię to on oczywiście wpadnie do domyślnego slota

2:14tutaj, ale mogę mu przypisać atrybut slot i podać

2:19tutaj nazwę na przykład navbar, okej i teraz

2:23wpadnie to dokładnie w to miejsce, które zdefiniowaliśmy w tym miejscu. Natomiast

2:27jeżeli nie chcesz do każdego elementu jeżeli miałbym tutaj więcej linków, nie

2:31chcesz każdemu przepisywać tutaj atrybutu slot lub jeżeli

2:35to dla ciebie wygląda dziwnie to możesz zrobić jeszcze rzecz ciekawszą, moim

2:40zdaniem lepiej to po prostu wygląda tutaj, stworzyć template, jej przypisać slot, a

2:44taką templatką opleść element. Jeżeli jest jeden to mogliśmy do niego przepisać

2:48atrybut, ale jeżeli jest więcej, można je podać w ten sposób i ta templatka

2:52oczywiście sama w sobie zostanie wycięta, czyli jeżeli zajrzymy sobie do wynikowego

2:57kodu wygląda to następująco. No i teraz na przykład możemy stworzyć jeszcze slot tutaj w footerze,

3:03ustawię jego

3:07name na footer i teraz w tym

3:11miejscu mogę coś podać do footer'a. Nie musi to być w tej kolejności oczywiście, ale

3:16jest bardziej jakby logicznie, że od góry do dołu, ale takie templatki

3:20mogą być w dowolnym miejscu, okej, name to będzie footer

3:24i podamy sobie coś takiego. Pamiętaj znowu, że do tego paragrafu

3:28można przypisać name footer i on wpadnie wtedy w odpowiednie miejsce. Oczywiście

3:32tutaj nie będzie name tylko tylko to będzie slot, tak jak zrobiliśmy wyżej. Ja jednak

3:37preferuję taki zapis tę templatkowy, lepiej to wygląda, jak widzisz wynik jest dokładnie

3:41taki sam, ale mamy kontrolę nad tym co tutaj wstawiamy. Czyli

3:46jak widzisz jeżeli slota nie nazwaliśmy, to jest

3:50on domyślnym slotem, tak jak tutaj i wszystko tutaj do niego wpadnie. Jeżeli taki

3:55jeden paragraf jeszcze wstawiłem tutaj poniżej, znowu to dziwnie wygląda, ale Vue to

3:59odpowiedni znak i odpowiednio wstawi do tego domyślnego slota, okej,

4:04oczywiście w tych slotach tak samo jak w lekcji poprzedniej

4:08ci pokazywałem możesz przypisać domyślną wartość, coś tutaj można wstawić. Jeżeli

4:12nic nie zostanie do tego słota przypisane, to będzie to domyślna wartość

4:16wyświetlana. Teraz chciałbym ci pokazać jeszcze jedną rzecz,

4:20bo do tej pory już się pewnie zorientowałeś, bo mówiłem o tym w lekcji poprzedniej, że

4:25nie możemy tutaj wyświetlać rzeczy z tego komponentu, czyli edu app,

4:29jeżeli ma jakąś właściwość ja nie mogę jej tutaj wyświetlić, bo tak naprawdę ja jestem w templatce

4:33rodzica, czyli tej aplikacji. Jeżeli chce się do czegoś odwołać to w tym edu app musiałbym

4:38to zrobić gdzieś tutaj, ale pytanie czy da się jakoś stąd wypchnąć

4:42do góry jakieś dane i wstawić je tutaj, ale wewnątrz tego elementu to jest

4:46ważne, okazuje się, że się da. Natomiast żeby nam to zadziałało to nie możemy

4:50mieć dwóch domyślnych slotów, bo za chwilkę zrobimy taki slot który też będzie

4:54traktowany jako domyślny, więc musimy zrobić taką rzecz, że ten

4:58który był domyślny to przypiszemy mu name, na przykład

5:03main, to co tutaj mieliśmy wstawimy również

5:07do template i tutaj napiszemy slot równa się main. Okej

5:12to powinno działać tak samo. Natomiast teraz przejdziemy do sedna tego

5:16o czym mówię, czyli przyjdziemy sobie do edu app i ja już tutaj

5:20wcześniej jak widzisz dodałem title aplikacja i chciałbym w jaki sposób ten tytuł

5:24nie wyświetlać tutaj wewnątrz, ale chciałbym móc go wypchnąć

5:28gdzieś tutaj na górę, żebym mógł go w jakiś odpowiedni sposób tutaj

5:34wstawić. Okazuje się, że jest to możliwe za pomocą tak zwanego slot-scope. Możemy

5:39tutaj utworzyć templatkę i przypisać jej atrybut slot-scope równa

5:44się i tu możemy napisać nazwy zmiennej, która nas interesuje. Może się ona

5:48nazywać props. Tak też jest dokumentacji i ciekawe jest to, że teraz wewnątrz

5:52tutaj, może na przykład zrobimy H1, możemy

5:56się odwołać do tego props i następnie title. Tak

6:01by to mogło wyglądać, title za moment sobie, że tak powiem wypchniemy do góry.

6:05To props mogłeś nazwać na przykład data, wtedy tu byś się odwoływał data. Natomiast,

6:09jeżeli teraz to odświeżę to w zasadzie nic się nie wydarzy, ale teraz

6:14musimy zrobić jeszcze jedną rzecz, żeby z tego komponentu edu app coś

6:18można było tutaj na zewnątrz wyświetlić. Musimy przejść to jego templatki, na

6:22przykład tutaj, w dowolnym, miejscu w jego templatce i wpiszemy

6:28taki slot, któremu przypiszemy title, właśnie dlatego,

6:32że u góry też zrobiłem title i mogę tutaj podać

6:36dowolną wartość, ale żeby ta wartość była dynamiczna to zbindujemy ten atrybut do

6:40title, czyli do tej właściwości którą przechowuje właśnie tutaj i chociaż to

6:46się wydaje na początku zagmatwane, jeżeli na spokojnie na to spojrzysz, robimy taki slot,

6:50bindujemy atrybut title, tutaj mogę zbindować więcej atrybutów na wartość

6:54w tym przypadku aplikacja i dzięki temu tam gdzie osadziłem edu app, mogę

6:59wewnątrz tego komponenta, komponentu odwołać się do template

7:03slot-scope. Ta nazwa jest dowolna i do tego title będę

7:08mógł się odwołać, odświeżmy i widzimy, że aplikacja tutaj

7:12się pojawiła na samej górze. Natomiast, żeby to lepiej wyglądało to

7:16można byłoby tutaj zrobić sobie jeszcze jakiś element typu container i

7:20tutaj

7:24musiałby mieć jeszcze taką podobną klasę, jak w tym miejscu, czyli w tym przypadku grid lg. Po

7:31odświeżeniu, jak widzisz wygląda to dużo lepiej. Zatem jeżeli będziesz

7:35potrzebował rozłożyć sobie swoją aplikacje i zrobić na przykład header, footer, sidebar

7:40i tak dalej, to już wiesz jak możesz to zrobić za pomocą nazwanych slotów. Natomiast czasami

7:45może zajść taka sytuacja, że chciałbyś również z komponentów wypchnąć coś na

7:49zewnątrz i to będziesz mógł zrobić z użyciem slot-scope, właśnie tak.