Vue.js Tips: Use Slots The Right Way // VUE.JS SLOTS TUTORIAL WITH VUE 3

hey developers so today we are looking at slots inside vue.js which is a really cool feature that allows you to use parent and child components in a different way than you may not have used before so i'm going to show you guys a quick tip on how to use that so make sure you watch all the way at the end and you can learn all about it and if you're new to this channel my name is eric i'm a full stack software developer i'm also the author of the vue.js in action book and just i'm just a big fan of javascript vgs web development front end development back-end development so if you guys like those type of things make sure you click that like button on this video and click subscribe and you can learn more about it in the future all right oh yeah and a quick thing i just want to mention to you guys if you want to jump around this video that is perfectly fine i actually put timestamps in all my videos so you can just click on the timestamps the bottom you can jump forward jump back that's awesome go for it all right so let's go and jump into this app right here and by the way if you want to follow along i'll make sure i'll upload this app to github and the link will be in the description too oh yeah and you didn't think i would get this far without a quick plug i do have a course called view 360 and also i'm doing some newer cooler things with vue and giving some free content away if you click on the link in the description you go to course.viewcourse.tech you can sign up for it please do so okay let's see here this is a brand new app i'm using view three right now this is the release candidate of you three as of this recording uh so i just want to show you i have one simple component called app this is basically out of the box view if you use view cli and you create a new app this is what you get so i'm gonna create a new component here i'm gonna call it child and in this i'm going to use see by the way i'm using an extension that i can just type vbase in and i hit tab and it automatically fills everything out if you're interested in that you can check out sarah dresser's sarah drasner's view extensions or view snippets and i'm just going to see if this works child says well let's do this let's do a h3 tag hello from child and if i do that i need to go back to my app view and actually import it of course so import child from at remember you can use the at sign that defaults to the source folder so that'd be components slash child.view and then i just need to add that in child here and then i can add it in child here let's see if that worked refresh it hello from child so now we have created our first child component so if you remember how to do slots it's pretty simple uh the way you want to do slots is instead of just closing this bracket here we actually want to keep it open so i'm going to do this child and in between here i can type something in so if i want to put in hello world by the way i'm going to go pretty quick through this tutorial so at any time you get confused feel free to stop the the stills feel free to pause it and you can watch it over again i know some people actually tell me they watch all my videos in 1.5 or 2x if you do let me know leave a comment below if you watch my videos in 2x i'm just interested because i think i talked pretty fast already all right so here you can see here i did that nothing changed and this is saved but if i want this content in between the opening closing brackets my child component to actually be seen what i need to do is go into the child component itself and then add in this thing called slot and it sort of looks like this and if i do that now you can see here hello world is showing up or it's actually hello from child hello world let's see yeah this hello world here i'll delete this i'll put this i'll make this say hello from slot so that makes more sense so here he says hello from slot so you can see yep slot is working so now you're probably and i have a question for you guys that are watching this should be pretty easy if you're new if this is kind of a beginner's video by the way so if this is not your cup of tea you know feel free to watch the next video but if i put something in here let's say i put a button in here and this button says press me and i add a click handler to it so i'm going to put in this app click and it's going to be i know called pressed and then let's say i put a methods here and i have a pressed and i put in alert hello from slot i should be hello from parent the question is if i had another method in here the same thing called pressed is this button going to talk to the parent component basically this app view component even though this is a slot right here or is it going to talk to the child component and that's the question okay so i gave you guys a few seconds to think about it and let's try it so if i click click this button i get the alert hello from parent so essentially what's happening is anything was inside the opening closing brackets of this child of this child component for this slot uses the parent component or basically this app views scope so in other words we can access this pressed from inside this parent even though it's in between the slot right here so that's the way it works basically same thing as if it's in the in the parent parent scope here parent component so now you're thinking like well i've heard of slots and scope slots so how does that work well we can we can do something like this inside our child component we can attach stuff to this slot and i'm not there is ways too we can have like multiple slots and we can define different names i'm not going to go into that but let's do a very simple example i'm going to have this data object here and this is going to return basically an object and i'm going to have something called data in it and i can name this whatever i want it to but i'll put this is from the child it's just a simple string that says this is from the child and i'll just make sure i do this right and i need an arrow function did i do that right see here let me correct it there we go let's see still have an error there we go okay so i have this data object now i can actually pass this data object over inside the slot like this make sure i put data that means it's going to bind it i'm doing basically a v bind there and then i can pass the data over so now if i go to this app view i actually basically can retrieve data from my child component in some inside my parent component inside this app view and the way to do that is i can do a v slot here and then from here i can put in the basically i can extract the data coming through and it comes in as like an object so i can destructure it and just grab the data out of it so if i do that and then i wanted to actually use the data somewhere i'll save it cool i say hello friend this is from the child so let's take a look we could this is from the child this is from the child slot scope so this is from the child slash hope so you can see right here we're able to grab data from the the child component which is this one right here and pull this into the parent component up here maybe i can do this you can see hello from child this is from the slot scope which is kind of cool i could also i know i could put styles around this and put a border around it but you get the idea this is from the child's this this essentially if we look here is from this child scope all right so now the next question you might have is you remember this example before we had this button click but it was actually using even though it's between the opening closing brackets of this child component it was still using this parent component scope what happens if we actually wanted to run a method from the child component so this one right here so let's say i created a new one i'm going to create one called methods inside this methods i'm going to create my own i'm just call it hello for lack of a better method name and it's going to have a windowed alert that says this is from the child okay so this is from the child and now i can actually um i can send this over in the slot as well so i'm gonna go i can do something like this hello equals hello it doesn't have to be the same name but that's fine now i can now this parent com app can actually grab hello as well so i can do a second button uh button let's try it there we go and then we're gonna we'll say this is the child component button by the way i'm sorry my keyboard's a little clicky so i'll do another click but this time i'll pull out hello so let's see what happens there so now i have and i don't have any real styling here so if you're looking for styling i apologize let's just do a break there okay so pressing this is for the child slot scope this child component so you do press me this is hello from parent but if i do child component hell this is from the child so basically so this is from the child so i'm getting the window alert from my child component so i was able to pass back in from the child component back to the parent component using slots an actual function which is really awesome yeah so that that's all i wanted to show you guys so if you didn't know that you can certainly talk two ways between a child component and parent component using slots which is really cool now those of you have been around for view a while are probably thinking yeah i could have done that easily with with props and then i could have emitted values back and done all that but i think this once you start getting into slots and you're like arranging data from a child component to a parent component sometimes doing slot scopes just makes more sense it definitely does so thank you again for watching that's all i have today i really appreciate it for those of you watch all the way to the end leave a comment below let me know what you think of the video love it hit it is this too beginner for you guys is this too like way too easy for you if it is leave a comment or if this is way too hard for you guys leave a comment i'm trying to get better at these tutorials trying to explain it better and and scopes are one of them and by the way i did use view three here and i'm just using the the options api i could have certainly set up a setup function and use the composition api but i thought just for the simple example i didn't so i could have switched this hello into the setup function i would have worked just as well so yeah so let me know what you guys think of these tutorials let me know what you want to know next and leave a comment below and if you haven't already make sure you go to course.viewcourse.tech and sign up for my email newsletter and i'll let you know when i have some new cool stuff with u3 thanks

Channel: Program With Erik

Views: 20,175

Keywords: Vue.js slots, Vue.js tips, vue js, vue.js tutorial for beginners, vue.js tutorial, vue.js project, vue.js tutorial 2020, vue.js examples, vue js performance tips, vue pro tips, Vue help with slots, Vue slot scope, Slot scope, Starting out with Vue.js, Vue.js slot example, Vue slot example, Program with Erik, Program With Eric, Erik Hanchett, programming

Id: GHAMYwlPCug

Length: 11min 59sec (719 seconds)

Published: Mon Aug 31 2020