No video

The Trick to Understanding Scoped Slots in Vue.js

  Рет қаралды 54,390

Adam Wathan

Adam Wathan

Күн бұрын

Learn more about my "Advanced Vue Component Design" course:
advancedvue.com
In these screencast, I walk through how scoped slots work in Vue.js and how thinking of them like function props can make them a lot easier to understand.

Пікірлер: 69
@BsiennKhan
@BsiennKhan 5 жыл бұрын
I have already seen 3 veidos on scoped slots and this is THE ONE that made it all clear in a very simple way. Anyone who disliked the video, I wish you spill salt instead of sugar in your tea.
@guilleagudelo
@guilleagudelo 4 жыл бұрын
That guy has a teaching gift
@matthewhausman
@matthewhausman 3 жыл бұрын
agreed, second part is a bit much though XD
@fvbixn
@fvbixn 3 жыл бұрын
I am using vue for long now and did so many apps in it. Never understood scoped slots, and all tutorials & blog articles trying to explain it weren't working. Finally, it makes sense. Thank you Adam!
@supertrillo
@supertrillo 5 жыл бұрын
This explanation is so beautiful. Thank you!!!
@adarshmihir74
@adarshmihir74 Жыл бұрын
Wonderful explanation on a quite difficult and confusing topic in Vue. That helped me a lot, thank you mate
@andrewking1173
@andrewking1173 2 жыл бұрын
Omg you explained this so well, scoped slots are one of the most confusing things to follow on a first impression. Thanks!!
@nadeemkh100
@nadeemkh100 2 жыл бұрын
Man One of the best videos I have ever watched for explaining scoped slots in an easy way. Thanks a lot mate.
@cadexgenomics3215
@cadexgenomics3215 5 жыл бұрын
Best explanation on this subject I have seen! Very nice work Adam.
@yesayasoftware
@yesayasoftware 6 жыл бұрын
Thank you so much Adam. Your a good presenter and teacher. Your making the complex logic understandable in a simple approach. I like the way your fluently explaining these details. Definitely, I cant wait for the course to learn more. Thanks.
@ricklove8358
@ricklove8358 2 жыл бұрын
best explanation so far
@OmarOnAWave
@OmarOnAWave 2 жыл бұрын
what an AMAZING explanation !
@ceo-s
@ceo-s Жыл бұрын
The best explanation. Thanks
@ricklove8358
@ricklove8358 2 жыл бұрын
you just got yourself a new subscriber
@ni_kabiu_john
@ni_kabiu_john 3 жыл бұрын
WWOOOOOOOOWWWW why were you not my lecturer..?????? well explained .. even tells you every possibilities and explains errors.. WELL MADE VIDEO TUTORIAL.. STRONG EMOJI STRONG EMOJI
@jemetz1818
@jemetz1818 5 жыл бұрын
Fantastic explanation. Clear and concise especially with the comparison. What is the use case of scoped slots however? In the example I’m not sure I understand why it would be useful to pull props up the the parent
@mahmoudzakria6946
@mahmoudzakria6946 4 жыл бұрын
That's the quite right question!
@paz1359
@paz1359 2 жыл бұрын
Mesmerizing explanation ❤️
@kelvin513
@kelvin513 4 жыл бұрын
Just found that the ‘slot-scope’ and ‘slot’ attribute is deprecated, and will not be supported in Vue 3. But this video explain the slot-scope very clear. Thanks a lot!
@sandrodentella
@sandrodentella 5 жыл бұрын
Very clear explanation. I have been looking for quite a lot of time for such an effective explanation on scoped slots. The other that is very effective... is again from you and is on renderless components!
@redfox05nl
@redfox05nl Жыл бұрын
@sandrodentella do you have a link? I tried to look for the renderless component video, can't find it.
@bm2ilabs
@bm2ilabs 6 жыл бұрын
You dazzle me every time with this tips, thanks for the tutorial, Can't wait for the advancevue course
@serendip9473
@serendip9473 2 жыл бұрын
perfect, Thank you.
@MihkelMark
@MihkelMark 3 жыл бұрын
Epic. Well explained. 💯
@AshanBoralugoda
@AshanBoralugoda 4 жыл бұрын
wow! this made it all so simple to understand!
@igorl.vicente7275
@igorl.vicente7275 4 жыл бұрын
That really made easier to understand what I thought was so complicated.
@sixkiller9240
@sixkiller9240 6 жыл бұрын
Every tip of Adam just blows my mind! Keep rocking!
@umitdemir3741
@umitdemir3741 5 жыл бұрын
This video is very helpful and your explanation is great. Thank you
@abd_el_ouahab3824
@abd_el_ouahab3824 10 ай бұрын
awesome expalantion ! 👌
@PSYCHOMOFUCKA
@PSYCHOMOFUCKA 5 жыл бұрын
This video is perfect. I'm getting your course. Thank you so much.
@josephang9927
@josephang9927 5 жыл бұрын
I love hoy you explain stuff.
@superasn
@superasn 4 жыл бұрын
You're an amazing teacher Adam.. Finally I understand it. Also just checking but if you do won't it render html returned by the function too?
@CherPsKy
@CherPsKy 4 жыл бұрын
Very well explained, my man.
@kraeger
@kraeger 6 жыл бұрын
Great explanation, crystal clear
@2002budokan
@2002budokan 4 жыл бұрын
Great explanation, thank you.
@rolikaseventysix
@rolikaseventysix 4 жыл бұрын
Brilliant, thx
@simonhunt9857
@simonhunt9857 6 жыл бұрын
Is there a way to pass from a child to a parent using scoped slots? For example, an html structure like this: Where is registered within the component rather than globally (or on the component) - which would make sense as you probably wouldn't ever need a sortable-list-handle outside of a sortable list. Out-of-the-box this throws an unregistered component error because the component doesn't know about precisely because it's being registered locally within the component.
@goodmans90
@goodmans90 6 жыл бұрын
Very well explained Adam!
@dasten123
@dasten123 6 жыл бұрын
Super excellent tutorial! Thank you very much!
@carlosync
@carlosync 4 жыл бұрын
What theme are you using on vs code?
@habalgarmin
@habalgarmin 6 жыл бұрын
Наконец-то стало понятно как это работает!
@paladincubano
@paladincubano 5 жыл бұрын
Thanks Adam, nice explanation, I already bought the entire course, very useful. One question, what editor and theme are you using?
@charlesyin3818
@charlesyin3818 6 жыл бұрын
Very clear, great video. BTW: what's the name of your color theme? It looks awesome
@narayanadhikary8833
@narayanadhikary8833 5 жыл бұрын
Thank You Very Much Brother
@andys4777
@andys4777 5 жыл бұрын
thanks, it was just what i needed
@daviddaza2357
@daviddaza2357 4 жыл бұрын
What a genius. Thanks Adam!
@adam192021
@adam192021 5 жыл бұрын
The BEST as always!
@CarlosContreras-hh1xe
@CarlosContreras-hh1xe 5 жыл бұрын
Thank you!
@KevinGarcia-jg9zs
@KevinGarcia-jg9zs 5 жыл бұрын
Thanks, I'll watch this again, and again, until I get it, unless you have other resources?
@nyambe
@nyambe 5 жыл бұрын
Beyond awesome 😎
@tribakzero
@tribakzero 6 жыл бұрын
This is interesting, but seems to me that you forgot to add a fallback in case they don't want to use a scoped slot on every instance, something like this: `{{ contact.name.first }} {{ contact.name.last }}`
@console--log
@console--log 6 жыл бұрын
whats the css framework you used for the contact list component ?
@4leep
@4leep 6 жыл бұрын
That's Tailwind, a CSS framework that Adam created. You can check it out at tailwindcss.com/
@AdamWathan
@AdamWathan 6 жыл бұрын
Yep Mads is right, Tailwind!
@mikeziri
@mikeziri 6 жыл бұрын
powerfull!
@RabbitWerksJavaScript
@RabbitWerksJavaScript 5 жыл бұрын
FullStack Radio!
@VGameJunkies
@VGameJunkies 3 жыл бұрын
this is fucking awesome
@christianmartinez2179
@christianmartinez2179 3 жыл бұрын
A scoped slot is conceptually just a callback No wonder it looked so familiarly messed up **flashbacks**
@leeboyin945
@leeboyin945 3 жыл бұрын
scoped slots: a way for passing data from child components to their parent component
@grantholle
@grantholle 5 жыл бұрын
👏👏👏👏👏
@alexanderkim7241
@alexanderkim7241 4 жыл бұрын
slot-scope is deprecated.
@AdamWathan
@AdamWathan 4 жыл бұрын
This video is almost two years old. The feature still works just the syntax has changed.
@kamilblack3346
@kamilblack3346 3 жыл бұрын
The "slot" and "slot-scoped" are depracated in 2.6.0+, but both attributes will continue to be supported in all future 2.x releases, but are officially deprecated and will eventually be removed/was removed in Vue 3.
@aukhianteosi9729
@aukhianteosi9729 6 жыл бұрын
They should put this in the tutorial
@yitan4142
@yitan4142 4 жыл бұрын
the video is smart
@longbo666
@longbo666 4 жыл бұрын
深入浅出,由表及里
@thewizardguy1337
@thewizardguy1337 6 жыл бұрын
please. i love you. buy a pop filter for you mic !! =)
@mrrolandlawrence
@mrrolandlawrence 4 жыл бұрын
tailwind and vue components were made for each other. so nice to ditch old fashioned bought components from different companies that all include so much baggage.
@eotikurac
@eotikurac 4 жыл бұрын
this vue stuff is insanely complicated
Vue.js Tips: Use Slots The Right Way // VUE.JS SLOTS TUTORIAL WITH VUE 3
11:59
If Barbie came to life! 💝
00:37
Meow-some! Reacts
Рет қаралды 75 МЛН
My Cheetos🍕PIZZA #cooking #shorts
00:43
BANKII
Рет қаралды 28 МЛН
Kids' Guide to Fire Safety: Essential Lessons #shorts
00:34
Fabiosa Animated
Рет қаралды 16 МЛН
КАКУЮ ДВЕРЬ ВЫБРАТЬ? 😂 #Shorts
00:45
НУБАСТЕР
Рет қаралды 3,4 МЛН
Для чего нужны scoped slots во Vue
9:53
easydev
Рет қаралды 2,3 М.
Vue.js Scoped Slots & Renderless Components
22:19
Andre Madarang
Рет қаралды 14 М.
Build your own Custom Composables in Vue
12:13
Vue Mastery
Рет қаралды 41 М.
It's time for change, it's time for Linux.
10:53
DankPods
Рет қаралды 275 М.
[Episode 29] Vue Scoped Slots
32:07
Bingyang Wei
Рет қаралды 85
Svelte 5's Secret Weapon: Classes + Context
18:14
Huntabyte
Рет қаралды 18 М.
Vue Slots Simplified
7:25
LearnVue
Рет қаралды 54 М.
Advanced Golang: Channels, Context and Interfaces Explained
22:17
Code With Ryan
Рет қаралды 117 М.
Advanced Vue.js Component Design - Adam Wathan
1:00:13
Laracon Online
Рет қаралды 7 М.
100+ Web Development Things you Should Know
13:18
Fireship
Рет қаралды 1,4 МЛН
If Barbie came to life! 💝
00:37
Meow-some! Reacts
Рет қаралды 75 МЛН