Component Props

[00:00:00]
>> So first thing when it comes to component is one of the most basic techniques we all learn when we first start using vue is our props, right? Because we want to be able to passing down and define them at the component level. And so here we have a basic nav item.vue as a quick overview for those who might be a little newer to vue we have our script block on the top that has the props of label.

[00:00:22]
And inside of our template, we go ahead and use it inside of the href. And we also use it as the actual text that's rendered on the anchor element. And so here, yep, and then we have these two down here, okay. So how that might work is if we have like a Navbar.vue, for example, that component that will then pass down its label into the prop, which goes ahead and propagates our HTML accordingly.

[00:00:50]
So this should all be fairly familiar to you if you already use props. Now knowing those things you'll see that we're using the props as defined as an array. And it's simply defined as like the the label in this case. And so for production level vue apps, I would recommend just staying away from defining props as an array.

[00:01:11]
And so is it like you should never use it? No, it's not that you should never use it. It's pretty good for if you're just prototyping something and just want something to get passed through. But when it comes to scaling your application and components, a little bit more documentation is important because actually right now if you think about it label can take basically anything, and developers would have no idea how to properly use it.

[00:01:34]
So here we have our problem actually then define as the object syntax here. So the props is an object that takes basically different keys that provide the actual props. And so in this case, you'll see there are three different labels that are being sorry, three different attributes that are being appended to the label that we're defining.

[00:01:53]
The first of which is the actual type, so in this case, we want the label to actually be a string. And then on top of that, on the prop, you can also define whether or not it's required or not. And so with that, what we're going to see here is that by default is going to be false, right?

[00:02:08]
We're going to assume most props are optional. But otherwise when it comes to the default state of it, we actually can provide a value. In this case, we can provide a default value that then basically whenever you don't pass a prop. It will go ahead and default to that current value.

[00:02:25]
So this is actually fairly standard I've seen on a lot of different enterprise level apps where we go ahead and it makes sense, right? You've defined the type you've defined that is required, and you've defined that there's a default. But if we think about what the purpose of each one is, since you already have a default It's not really necessary to actually have the required.

[00:02:42]
And in fact, I would call it a redundancy. So going forward, I would say, as you're writing out your prompts, if you have a default value, no need to define that it's required because it will always have a value. Otherwise, vice versa, If you don't have a default, then it should be required true.

[00:02:56]
So this should shorten your prop definitions a little bit because instead of two, three lines, now you have two. The other thing that most people don't know is that props can actually take a custom validator function. So we can teach you that with props, as long as you define the validator, it is basically a function that will provide you the value that's being passed down, and it will basically check whether or not this is, will try like a true and false value.

[00:03:21]
That will then actually air out inside the console. And so this is pretty cool because now even if you're not using TypeScript, for example, you can basically add like more specific typing to your props. So in this particular case for our label in this, the product only wants us to be able to do like home and about like, you should not take anything else.

[00:03:41]
So using our validator function, we can actually say that hey in this array of valid values, go ahead and check against that, and if it exists inside the valid value, we're good to go. Otherwise, go ahead and flag an error for that. And so yeah, this is one of those things that a lot of people don't realize exists, but is super valuable as far as providing additional documentation for your developers as they use things and just making sure that they work as expected