all right what's going on everyone props are a very common thing that we Define on our view components they allow us to pass data from a parent component to a child component and sometimes you may need to send over a handful of props in the form of an object to a child component and what I want to show you within this video is my preferred way to handle this in a clean and organized way all right so I went ahead and put together a demo application for this using nux 3 now if you are using vue3 this will work for you as well so what do we have going on inside this demo it's pretty simple first off we're just creating a user which is being set equal to a ref and then we're typing it with this uh user type that I imported here at the top of the script tag and we can see that actual user type being created right here now back inside of the appd view file we also have a component called user card and then inside of this component it's very simple very Bare Bones we just have the typical view file structure and then since we're going to be using that user type I went ahead and imported that here and we also have the Define props macro which is how we'll be defining our props that we want to use within this component okay so let's say for example we want to take our user object that we have here and we want to send it to this user card component and we could do this through what is called a prop so typically how you would see this done in most examples that I see when looking at other view code is you might create what is called a user prop so we can say colon user this is going to be the prop that we'll be looking for on this component of user card and then we'll set this equal to our user object that we have right here and then here inside of our user card component we can uncommon our Define props macro and then within here we can just Define that user prop so we'll say user and then we can type this using our user type that we have imported so we'll just say user like this and now we set up a user prop that we can use within our user card component and then here inside of our template if we wanted to we could output some of those prop values so what we could do inside of this div is say something like user and then we can do Dot and we should get a nice list of all the available properties that we can use inside of this component so we'll just say first name like this now the problem that I have with this approach although it's not a wrong way of handling something like this it's just very granular and when you're building out components that have props it's a good idea to be specific in terms of what those props are and with something like this where we have a user prop that is an entire object to me that's not very specific so a approach I like a little bit better is instead of having a that is bound to an entire object is I like to have a prop on my component for each property that lives within that object so in this example that I have for the demo the user object has four different properties so what we want to do is create four different props here inside of this component and it'll look something like this so we'll just start off by doing the ID and then we can just type this to the user type that we have and then we can reference a actual property within that type and we can just do that inside of a bracket and then we can say ID and then we're going to want to do this for the remaining three properties that we have inside of that object and then we should have something that looks like this where we now have a prop defined for each one of the properties that live within that user object and then we no longer need to have this user prop so we can go ahead and remove that and we'll also want to remove this reference that we have here to our user prop within our template now back here inside of the parent component where we're defining our user card component we need to make a few updates to make this work so first off we no longer have this user prop so we can go ahead and remove this now you might be thinking that since we now have four different props here inside of our user card component that we need to create a corresponding prop here on our user card component that's being defined within the parent so you might do something like this where you create an ID prop so we'll say colon ID and then it'll set this equal to our user and then we can say that ID on there and then you do the same thing for the first name the last name and email where you'd create a corresponding prop on this user card component and then you'd have something that looks like this now this isn't the wrong way to do it but it's not the most efficient way so instead of having to Define out all these individual properties that are being referenced to this object we can actually bind the entire object to our user card component so what we can do is a v bind and then we can set this equal to our user object and this essentially is going to be the same exact thing as if we were to Define all these different props here on our component individually but now we can do it in a single line with the bind and how I like to think about it is that this V bind is going to destructure this user object that we have so that way we can use those these structured properties inside of our user card component and now we can go ahead and remove all these different props that we have here and we can do the same thing with only one line which as you can see is a lot more cleaner and efficient and now here inside of our user card component it's a lot more clear what exactly this component is doing in regards to the props so instead of just having a big object here inside of our user card component we have essentially destructured these into individual props so that way we can see which props are being used throughout this component and if you were to have more properties on that specific object you don't have to declare them you can only declare the ones that you actually want to be using all right so that's going to wrap it up for this video hopefully you found it helpful and you're were able to learn something new if you did be sure to leave a like on it down below and subscribe for more content like this and I know it's been a long time coming but the next course is going to be releasing soon at least a portion of it so if you are interested in learning more about Nu be sure to head over to learn N.D and join the waiting list I will be releasing a portion of the course in the next couple weeks and for those interested in improving their front-end skills be sure to check out an application that I buil called web dev daily is essentially a application that offers you front-end challenges to complete inside of an Innovative vs code like browser IDE and I'll leave the link Down Below in the description it's free to join but anyways thank you for watching I'll see you in the next one take care