Vue Slots Simplified
Vložit
- čas přidán 7. 09. 2024
- Slots are another way in Vue for a component to inject content into a child component. This does this using template code.
In this video, we'll take a look at the basics of Vue slots, using scoped slots to pass data between components, named slots, and so much more.
COMPANION ARTICLES
general slot overview - learnvue.co/20...
named slots - learnvue.co/20...
scoped slots - learnvue.co/20...
IMAGES USED
placeholder image - i.stack.imgur....
cute pic of me :) - learnvue.co/wp...
FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
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.
Thanks ! !
Very clear explanation of a pattern-breaking functionality.
Your channel is excelent, you'll have a lot of subscribers in a short time.
♥️
This is the best explanation I've seen about vue slots. Thank you!
Lets just say you're a legend! 😊 Thanks for putting me out of my mysery with Vue Slots! 😊
Happy to help!
Really clear explanation. Thank you so much!
glad it was helpful!
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;
}
WHAT A GEM 💎! Outstanding content, dude! Keep up the great work
thank you ❤️
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 😅
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! was looking for scoped slots (without knowing the term) and found it!
Thanks very much, a straightforward and clear tutorial!
You're welcome!
This is one of the finest and simple explanation ❤❤
Brief and effecient!
thank you so much!
Thankx for breaking it down.. great tutorial for beginners
I see a PH flag 🇵🇭 in the background bro, I like! lol GREAT CONTENTS!!
😁
thank you so much for explanation, wow
This tutorial saved my time thanks.
you’re welcome😅
Very good explantation like it :D
Really nice explanation.
Thanks!
Very interesting and helpful video thanks a lot
💚
you are the best 🙌🔥
Outstanding explanation. Bravo!
thank you!
Oh brother I really long time tried to understand scoped-slots and only you could give me right understanding...
appreciate it!
Thanks!
thank youuu
Thank you so much for your making this video.
It's my pleasure 🗣
what a great explanation!
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.
Thx!
Great content!
😁
great
We use slots for template code and if we don't allow template code we use properties?
Hey I am enjoying your videos can you make one video on provide and inject
Please.
definitely! great suggestion
Keep up the good work 😸
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 :
thks
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!
hello, my problem is that when i refresh the page the slot content data inside the loop is not rendering.
🥰👍
after overriding a slot of a child can we also render the slots original content?
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