Excellent, well-rounded intro to a topic that always gives me grief. I like how you started your explanation from first principles and then built up to intermediate and advanced use of slots. Very smoothly executed! Thank you.
Great work. I sent an image tag back to my component! Very exciting. For anyone trying to do this, make sure to add an id to whatever your passing in. It's the only way to style it. For example, #pic { width: 40vw; height: auto; }
4:35 very interesting to see that you can use the same slot multiple time. It makes total sence, but it wasn't apperant to me at first. Great video, slots have been a bit of a mistery to me, thanks.
One thing confuses me. Why would I want to define data in the child, access it in the parent, and then pass it back into the child via the slot? I'm googling but not finding any examples where it doesn't make more sense to just keep the data in the parent and pass it to the child. I guess if the child makes an API call or something that changes the data and I want my parent component to modify the data based on some condition of what it received from the child before passing it back in? Just trying to make sense of it.
When you do videos like this, it would be cool if you linked the code you showed so you could check it out yourself. You could display the code like that, or maybe there's a way to open someone elses Vue playground, but I would generally appreciate being able to look through it at your own pace.
Hello there, I wanted to make a global component (not sure if this is right term). Similar to like a dialogbox, notification or simple modal. Scenario: I have a modal for registration. Message: "A message is sent to your email for verification". Button: "Re-send email" With `Message` part its easy since I can just pass the data however I am more concerned with the `Button's` functionality the for resending email. Is this gonna work with slot or prop ?
The component "CaptionedContent" is capitalized, but in the template you use "captioned-content" - is this vue syntax? do you have a video about that? I'm sure its basic, but I'm just starting to look at vue and few videos. really like your teaching style/videos. thanks man!
![[UA] NAVI vs MOUZ | BO5 | IEM Rio 2024](http://i.ytimg.com/vi/CMBYk0cbGoA/mqdefault.jpg)
Excellent, well-rounded intro to a topic that always gives me grief. I like how you started your explanation from first principles and then built up to intermediate and advanced use of slots. Very smoothly executed! Thank you.
Glad to hear! Slots used to be difficult for me too, but they're such a cool feature of Vue once it finally clicks.
Great explanation. Slots and scoped slots are hard to explain but you did it with ease.
This is the best explanation I've seen about vue slots. Thank you!
Thanks ! !
Very clear explanation of a pattern-breaking functionality.
Your channel is excelent, you'll have a lot of subscribers in a short time.
♥️
WHAT A GEM 💎! Outstanding content, dude! Keep up the great work
thank you ❤️
Lets just say you're a legend! 😊 Thanks for putting me out of my mysery with Vue Slots! 😊
Happy to help!
Great work. I sent an image tag back to my component! Very exciting. For anyone trying to do this, make sure to add an id to whatever your passing in. It's the only way to style it.
For example,
#pic {
width: 40vw;
height: auto;
}
Really clear explanation. Thank you so much!
glad it was helpful!
I can't believe this is the video where scoped slots finally clicked for me! Thank you so much! #subscribed
4:35 very interesting to see that you can use the same slot multiple time. It makes total sence, but it wasn't apperant to me at first. Great video, slots have been a bit of a mistery to me, thanks.
Great video. Straight to the point and simple to follow. Also bonus for not sounding like a robot 😅
thanks! was looking for scoped slots (without knowing the term) and found it!
This is one of the finest and simple explanation ❤❤
One thing confuses me. Why would I want to define data in the child, access it in the parent, and then pass it back into the child via the slot? I'm googling but not finding any examples where it doesn't make more sense to just keep the data in the parent and pass it to the child. I guess if the child makes an API call or something that changes the data and I want my parent component to modify the data based on some condition of what it received from the child before passing it back in? Just trying to make sense of it.
Let's say conditional rendering for example, or passing values to multiples component..Or side effect in the parent component :
When you do videos like this, it would be cool if you linked the code you showed so you could check it out yourself. You could display the code like that, or maybe there's a way to open someone elses Vue playground, but I would generally appreciate being able to look through it at your own pace.
Thanks very much, a straightforward and clear tutorial!
You're welcome!
Thankx for breaking it down.. great tutorial for beginners
Hello there, I wanted to make a global component (not sure if this is right term). Similar to like a dialogbox, notification or simple modal.
Scenario: I have a modal for registration. Message: "A message is sent to your email for verification". Button: "Re-send email"
With `Message` part its easy since I can just pass the data however I am more concerned with the `Button's` functionality the for resending email. Is this gonna work with slot or prop ?
if you're making a separate component, you can have the button functionality inside that global modal component and handle resending the email there!
The component "CaptionedContent" is capitalized, but in the template you use "captioned-content" - is this vue syntax? do you have a video about that? I'm sure its basic, but I'm just starting to look at vue and few videos. really like your teaching style/videos. thanks man!
yup! it's a common Vue practice to use kebab-case in the templates.
We use slots for template code and if we don't allow template code we use properties?
hello, my problem is that when i refresh the page the slot content data inside the loop is not rendering.
This tutorial saved my time thanks.
you’re welcome😅
Brief and effecient!
thank you so much!
Really nice explanation.
Thanks!
thank you so much for explanation, wow
Very good explantation like it :D
Outstanding explanation. Bravo!
thank you!
You're an absolute Chad, bro! thank you! 🤩
Very interesting and helpful video thanks a lot
💚
I see a PH flag 🇵🇭 in the background bro, I like! lol GREAT CONTENTS!!
😁
what a great explanation!
Thank you so much for your making this video.
It's my pleasure 🗣
you are the best 🙌🔥
Oh brother I really long time tried to understand scoped-slots and only you could give me right understanding...
appreciate it!
Great content!
😁
Keep up the good work 😸
Hey I am enjoying your videos can you make one video on provide and inject
Please.
definitely! great suggestion
Thanks!
thank youuu
Thx!
great
🥰👍
thks
Your picture returns a 404 error.
Thanks for the tutorial.
vue needs to stop with this new features i'm confusing so much to learn bro