Vue.js Tips: Use Slots The Right Way // VUE.JS SLOTS TUTORIAL WITH VUE 3
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- Vue.js has a feature called slots. In this video I discuss how slots work and some tips you should know!
#vuejs #vuejs3 #learnvue #vueslots
👉Check out my last video on Vue.js Vuex Killer Pinia
• Vuex Killer? A Quickst...
📚 Sign up and get notified about my new Vue 3 course! And get a free cheat sheet! - bit.ly/2vFWBQi
0:00 Introduction
0:50 What is the app about
1:38 Create Child Component
4:25 Creat slot
7:03 create scoped slot
♡ ♡ ♡
Make Sure To Check These Courses Out On Udemy! 💻
→ JAVASCRIPT ALGORITHMS COLT STEELE'S COURSE - bit.ly/2L8HSPV
→ THE WEB DEVELOPER BOOTCAMP (GREAT FOR BEGINNERS) - bit.ly/2zP4alw
👉 Algo expert is the best way to learn algorithms! Check out my code and get 15% off at checkout with code "erik" algoexpert.io/erik
___
Links (and code)
github.com/ErikCH/SlotExample...
MY WEBSITE - www.programwitherik.com
MY TWITTER - / erikch
![[ไฮไลต์] "บิว" ภูริพล บุญสอน วิ่ง 100m ชาย รอบคัดเลือก | โอลิมปิก 2024](http://i.ytimg.com/vi/3kUSMfgtQ5s/mqdefault.jpg)
📚 Sign up and get notified about my new Vue 3 course! And get a free cheat sheet! - bit.ly/2vFWBQi
Very nice. Been using Vue for a while now, but somehow never came across the idea of exposing a child component function this way. One bit of constructive criticism - It would be helpful for beginners if you didn't use variables like "data". It's hard to tell if this is a vue language word, or something they can change. Perhaps a more real world example would lead to better variable names.
I used to find that hard too. I think names like myVariable are always helpful because it shows it's not fixed or names that are not so generic.
Not sure if I'm just used to it, but I actually watch almost every educational video about something coding in 1.5 or 2
since people mostly tend to sway away or drive off topic and do "casual" talk about something none related.
There are videos prepared with a script beforehand which I set on 1.25, but I actually never watch on 1. Its just simply to slow
I think educational videos on youtube are mostly beginner or intermediate but never high end stuff.
I mostly know the basics and intermediate stuff on which I just can "skip" over as in listening to it briefly, understanding everything,
but this way I can get the gist of a topic or explanation better without losing track because people were like
"Ah and this (Which is something else) is this and that.. and let me correct this first.. ah wait I forgot.. " etc. You get the point
Perhaps some people as well just talk slow, sway away or simply introduce artificial delay on purpose to boost the time to a certain length.
Which is sad as well
This is good but looking for a use case tbh, it would be great to see some sort of use case where you would use this or have used it in the past
Thanks for the feedback
This was perfect for me. I'm not new to programming but I am new to Vue and this helped solidify what I couldn't grasp from just reading documentation. Thank you!
Nice content, very informative! I have some minor constructive criticism though: in your example at around 6:30, I think it would help with clarity if you don't name the property name you are declaring the same as the preset vue property (am talkin about the data: () =>{ data: '...' } section). Cheers and more power!
Very good video!! Finally I understand what are the slots and how they function. It's easy understand them, when someone explains the things fine. Thanks!
Thanks so much bro,this was one of the concept which confused me alot but now am happy you clear me all the doubts with your simple,clear and brilliant examples,
One love from Tanzania... Cheers ✨✨
OMG 2x, did not know this feature existed on youtube. You just cut my research time in half. Thankyou for the tip and thanks for the awesome content.
OMG. Thank. You. I have read article after article trying to grasp what scoped slots are, and have come away from each one just as confused as I was when I started. I finally get it. I'm struggling at the moment to think of a practical application for scoped slots, but I'm sure that will come now that I understand what they are.
Same!
Vue beginner here, and very grateful for this informative video! Thanks.
One of the Best Slot explaination ... great.. Thanks a lot
As always, awesome patterns revealed! Thanks!
New with Vue and first time looking at slots. Good amount of info and speed at 1x for following everything.
Simple examples makes it more understandable. Great job on explaining it to the most simple terms.
Thanks!
Thank broo, your video helped me in my job, you won a new subscriber today
theme seems like disco! :D thank you!
This was perfect, thank you
Great tutorial Erik!
very useful, thank you!
Thanks for the video, really helpful.
OMG! the best tuto I subscribe right now
This is awesome, thank you so much
great job will help me in my work ;)
I am one of the people who watch your videos at 2x speed. I don't watch full videos -- I do my best to extract only what I need and move on to my work or another video if I don't get the info that I need.
Thanks a lot!
Thanks !!
Got stuff Erik! thnks a lot
Awesome video!! Tnx
Good format to the point. I pause often to check the code. BTW I was expecting you to tell a real world example to get the 'why' of a feature. I like that you mentioned that the same thing can be done with props and events. I had to check again to confirm the difference I would really like a performance, limits analysis of comparing these options including Rxjs and Vuex.
really nice slot tips! thanks.. :)
You are welcome!
Love your video 🥰🥰
had a diff problem but your video kinda solved it
Amazing!
Thank you for your video! To answer your question, yes I watch at 2x. Would have loved to see a use case where slots is better than props and emit events! That would have tied it together really nice :)
Amazing !!
Thanks for the great content =D
Welcome!
thanks man
Starting to learn Vue and i have always wondered how slots work. Seems like it aint so difficult but i probably need some time to think how to use them for an actual web app. Great video btw.
You can do it!
Thanks
yep, watched in x1.5. Used to go for x2.0 but sometimes the sound quality becomes too bad.
Anyway, your talk speed is perfect. It's just a matter of pref (and allowed time ;) )
Thnx❤️❤️❤️❤️❤️❤️
Usefull
thanks
Speed is perfect and the video is not too easy or hard, for me at least. 👍
the speed for me is 1.25x for your videos, thanks for a cool tips :)
What is this styling you're using to make it glow? Really cool! Please share.
SIDENOTE: I tried watching in 2x and it was too fast. I realized that I was actually robbing myself by watching important videos at 2x because it's WAY harder to retain the information. The problem is patience and focus lol. Studying is painful sometimes, but we need to accept it.
2x is similar to people using drugs to escape reality. A lot of the time it's not that the presenter is talking too slow, it's that we don't want to be there in the first place.
just fine, thx!
Thanks for this tut!
Anyway, Did you know why filters are gone on Vue3?
Lovely. Please what type of vscode theme are you using ?
I love it
Te amo bro
Is there any difference in term of performance when passing data using slot vs emit/props ?
Thank you for the explanation really like your video.
Please use composition api when using vue 3
for me min speed is 2x, generally non programming videos at 3 to 5x, and only music or comedy videos at 1x and 1.5x
Aww, ok. Yeah I thought that would be too fast, but glad it works
Yes, I watch at 1.5. It is good.
That was a wonderful tutorial. I never thought it that way!!
I didnt think much of slots, but with that functionality i think it's pretty underrated. is that new with vue3?
Hey Erik, what theme do you use in visual studio code? this theme is amazing by the way!
I actually fell in love with the ide theme. What is it?
Found it! It's called SynthWave'84 - search for it in the marketplace.
I watch your videos in 2x. But don't worry, I watch other videos in 2.5x :)
I watch your videos at 1.25x speed even if English is not my native language.
Thanks for the great content
There is any MEVN stack project in the future?
I'll look into it!
Please do!
God bless u
This should work in Nuxt too right?
I’ll give it a try. I can see a useful case for this.
It should
when to use slots vs props for this kind of passing data between child and parent components ?
I watch all tutorials on 2x lol.. including this one
What extension do you use to change the theme of vscode? Tks you
Hi! What theme u use for vscode?
I am one of those guys, that watch development videos / tutorials in 1.25 or 1.5. Got used to it.
Yep I watch in 2x speed, because I will watch each video 5-6times to master.
So, to read and learn, there are techniques like skimming, scanning, intensive etc.
Watching your video at 2x speed is like skimming an article....
Great tip!
bro what theme you use ?
I am expecting more slots. ;D. This one is too short.
beginner noob question but still - what are a couple of real life practical examples?
For me I'm used to watch almost all youtube videos at 1.5x or 1.75x and some at 2x speed !!
I've seen where slots are being used like this and my question is... how is data being retrieved when it's not restructured from an object. From your video, data was restructured from an object.
Yes, I'm currently watching this in 1.7x speed.
But I'm only telling you this because you were curious, that is no critique! If I watch at a slower speed my brain starts wandering off, thinking about other things and loses focus. The best way for me to stay fixated on a video is to increase the speed to force my brain to concentrate.
But I've been a developer for quite some time, it's just vue specifics that are new. For example, to get from knowing absolutely nothing about vue to the basics I watched "Vue.js Tutorial: Beginner to Front-End Developer" by "Envato Tuts+" ( /watch?v=1GNsWa_EZdw ) in 2.3x speed on average! (sometimes I slowed to 2x and at most I used 2.4x).
I hope that insight is interesting
can u show me some extention used, please.
to me, it 's valuable only for strongly coupled parent/child components. adds an other layer of complexity to the game, and devs have to keep things as simple as they can. a good modular state managment wouldn't be preferable ?
2x watcher :-D
As u ask , I watch you on 1,75 :)
If I use slot name, it doesn't work . is there a way to fix it ? tks u
You can pass down a function and handle the click on the child,
hello = () => alert();
Is data passed through slots reactive?
I have a doubt, I am new at Vue. How can you update child's data? I mean, I have a parent component which uses a child passing a 'data'. When I update parent data, should it be update child's data??
Please make Vuetify tutorial and try there slots.
Ok~!
Watching right now in 1.5x, which is a little fast. One I have to watch in at least 1.5 is Ben Awad
How can I access slotprops from ???
why your text will be lighting?
what extension do you use?
Synthwave 84!
@@ProgramWithErik thx bro
Man, should I wait for the official release of vue3 for my project or just use react for now.
My experience has been that Vue3 is pretty stable. However if you plan on using TypeScript and the composition API things might be a bit more difficult. Things like vuetify and buefy weren't playing nice and type support for reactive objects seemed to complain with computed properties nested within them. But if you want to use JS you'll probably be fine.
@@StraightCrossing i want to use vuetify and laravel. But base on vuetify roadmap they will release their vue3 version next year
@@jgamer1394 yeah all of the component libraries have a lot of work to migrate to Vue 3 which is unfortunate. However you can use CSS libraries like bulma for styling and get most of the way there. But if vuetify is a must I'd wait or start now with Vue 2 then migrate to 3. You shouldn't have to rewrite html to migrate to vue3
what is this theme?
I've just kind of gotten used to watching tutorials at 2x speed, if I follow along I go slower though.
Sounds good, me too
I watch your videos at 1x speed. You do go fast. I think it's better to just let people use the 2x if they want it to be faster. Slow down is always more awkward than speed up using the youtube feature.
Steven Luoma - I am a native English speaker and, honestly, I would not want Erik talking any faster than he already does ;-)
I'm watching on 1.6x
2x
how do i configure the @ to work on import?
It's by default if you create it with Vue CLI
@@ProgramWithErik ah that's where I went wrong
which font you are using?
i believe its the theme he using, which i think it is github.com/robb0wen/synthwave-vscode
Yup
what's this guy's vscode theme?
1.25
Yes, I watch in 2x speed 😁
I watch everything at 1.5
Thought Slots were going away with Vue3?
Nope, they are staying, as far as I know.
@@ProgramWithErik Alright. Good to know :) If I may ask additionally: I thought that "methods" was replaced with "setup" in 3? Or do they serve different purposes?
Grapes: The “setup” or the “composition” api is purely “additive” meaning it is a bonus feature. The original way (the “options api”) of building components will remain.