This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Props" Lesson
[00:00:00]
>> Sarah Drasner: Props, they're one way communication, they're passing data down from the parent to the child. And the simplest way of defining what props we're using is this array. We're always gonna use an array, even if it's just one element, we still have to put it in an array.
[00:00:16] And it's always gonna be strings, because we're calling something by a name that's a string, even if the element itself is not a string, it's going to be a string that's placed inside of that array. Props are intended for one way communication, and you can think of it a little like, the component holds a variable that's waiting to be filled out by some piece of information.
[00:00:36] So if we have that same little piece of component, we've got this little thing that's just like, okay, I'm gonna chill here, waiting for something to be delivered to me. And then if I call out num is 1, then that 1 gets inserted into wherever that little placeholder was.
[00:00:55] So we can have multiple components, we can have a child that accepts this text, and I can say, hello Mr. Magoo, hello Mr. Magoo, and I have these two messages. And then I can say other message is hi there, that's not the same, and then it's still hello Mr. Magoo, because I'm still using message.
[00:01:22] But I could have one use message, and one use other message, and then one is using message, and one is using the other message. But the reason why this is useful is because if I need something, if I say I need this to output differently, both of them are going to output as that h1 now.
[00:01:42] So I can change the way that that layout works between the two things, they're completely separate.
>> Sarah Drasner: Okay, props, types, and validation, before we were just saying props is that array, but we could also say what kind of thing it is. Before we were using this text as props, so we could say text is either gonna be a string or a number.
[00:02:05] We definitely know for sure it's gonna be a string or a number. We could also go one step further, which I recommend doing, if you're gonna go one little step, go all the way. And say something like, type is gonna be string, required is true, and then my favorite, my personal, we always have to have favorites, my personal favorite is this default.
[00:02:25] Because if you have default props, that means that you don't run into a lot of errors if somebody forgets to pass something. Especially if you, let's say you have, like, a grocery store, most people are ordering apples. You could have a default that's the apples and then, if somebody forgets to fill something out, you might be correct.
[00:02:42] Or there's probably better examples than that one, but I'm hungry, so I'm just gonna use food for everything [LAUGH]. So we got the template that gives us that text, so if I have something like this, where I'm clearly passing a string, and where is my JavaScript? No, there it is, just took a second, so we've got type is boolean, required is true, and I'm actually passing a string.
[00:03:11] We'll get something like this view warn in the console that'll say, you know, invalid prop, you said that you wanted a string, what's up, that's really rude. [LAUGH] And we can get something else, if you're using a view CLI, you'll get an error in your terminal, and it'll actually give you a bigger error than just the console, so that's helpful for validating those props.
[00:03:34] Objects and arrays need, sorry.
>> Speaker 2: I know you said you weren't going to talk about testing, but does the testing stuff [CROSSTALK].
>> Sarah Drasner: This is a type of validation, it's not quite testing, if you wanted to do hook-up testing, it's really easy to do so with vue-cli, you can use the web-pack build and add-
[00:03:53]
>> Speaker 2: Testing your validations is important.
>> Sarah Drasner: Yeah, yes, this is like a type of tiny little unit testing-ish, but it's not full. I wouldn't ever replace testing with something like props.
>> Speaker 2: That wasn't where I was going with this.
>> Sarah Drasner: Sorry.
>> Speaker 2: I was wondering if the testing stuff has stuff built in to be able to check these things.
[00:04:12]
>> Sarah Drasner: Yeah, I mean, it depends on what testing suite you're using. They all have different functionality, so some of them are more geared towards, there's monkey testing, where things check all of these validations and go crazy. Another one is that you're writing your own unit test, so the answer to every programming thing, it depends [LAUGH].
[00:04:33]
>> Speaker 2: The universal answer.
>> Sarah Drasner: Yeah, the universal answer, okay, so objects and arrays need their defaults to be returned from a function. This is especially important because at some points, an object you might think if you don't return it from a function, it might think that you're trying to overwrite it into the new object that you're declaring.
[00:04:53] So definitely write your default as a function here, if you're going to do this kind of validation. You don't necessarily need to pass the data in props from the parent to the child either, you can use static values for this. So if I have this app data, and I'm adjusting this date up and down and up and down.
[00:05:17] You can see that that first one is not incrementing, and the second one is. This is the same component, though, this is exactly the same component. So what we're doing here is, we're not using the state of the parent in one. We're saying count is 1, and we don't have that v-bind in front of it.
[00:05:35] And then, we're using the state of the parent in the second one by using v-bind. So you need to use v-bind or that colon in order to dynamically bind the props to the parent, that's important. If you don't, if you leave this off, it will not work the way that you want to, passing the data from the parent to the child.
[00:05:54] If we go back to this demo, we have the app data that was changing, and we have this component that is not updating. So if we go back to here, if we wanted to just pass a static value, that's totally fine, we are totally allowed to do that.
[00:06:12] We can say count is 1, and that will be a static integer, the main difference, of course, is that v-bind or colon for a shortcut, that dynamically binds the props to the data on the parent. Each component has its own isolated scope, and this is the reason why data must be a function.
[00:06:30] We had kind of mentioned this a little bit earlier, and it's kind of like, why do you have to, we had it in an object, that was nice and clean, why are we putting it in a function now? Well, the reason why we can't put it in an object is that, once we start using components, we'll get something like this.
[00:06:45] Where the component doesn't have that isolated scope unless we're returning from a function. It will just keep increasing all of them, no matter which one I toggle, and when data is a function, each component will have its isolated scope. This example is actually a riff off of the docs, the documentation, if you haven't been there before, it's really, really well done, it's really easy to understand, and very, very human legible.
[00:07:11] I tried to improve this example, and couldn't even improve on it, because it illustrates that just perfectly. One thing to note in this example is, I had to store this data in an object in order to pass it. Because view won't even let you actually do this, if you have a bunch of different components, it's going to error and let you know, and give you warnings.
[00:07:31] Especially when we move to view CLI in that build process, it'll definitely alert you if you do something wrong like this. But you should be aware that you should just be kind of like always putting data in as a function. Because then you can refactor your code, it's more malleable.
[00:07:50] You won't run into situations where you have to change something, and then make it a component, and then something breaks or something, so just get into the habit of writing data as a function.
>> Sarah Drasner: Camel casing will be converted, this is a nice view thing, view understands that in Javascript you're gonna be wanting to be camel casing values.
[00:08:10] But that in HTML, when we actually use those in HTML, they're gonna need to be kebab-cased, cuz that's what HTML properties actually look like. So it will convert something like boolean value here that's camel-cased, and change it into something like boolean value with that kebab-case there. It'll just do that naturally for you, you don't have to do anything special for that work.