Passing Data via Props 0:00In the last video, I left you with a bit of homework. We successfully made our first component, but then we realized that there might be some situations where we want to access that specific coupon that the user entered outside of the component. And because this is sort of its own thing with its own scope, well, its data is not available outside of it, right? So how exactly do we solve this? And actually, the answer is really pretty simple. We can use properties on our components, like this.And actually, the answer is really pretty simple. We can use properties on our components, like this. When applied, then do something. Set the coupon. Remember, think of this component as a child component, and it does its own thing. Just like parents will have children, the children grow up and they do their own thing, and they don't necessarily notify the parent of every single thing that happens. But there are still some situations where the parent needs to be notified.and they don't necessarily notify the parent of every single thing that happens. But there are still some situations where the parent needs to be notified. When you get in a wreck, you need to let me know right away so that I can call the insurance company. That's all we're really doing here, just the code version of that. So, coupon, when you are applied, well, what is this? It's just a property. It can be foo, it can be bar, it can be onApplied if you prefer that convention. It doesn't matter. It can be anything you want. Registering Component Props 1:15It doesn't matter. It can be anything you want. However, you just need to make sure that you register it within your component declaration, like this. If I go to app.js, and also real quick, we use document.querySelector. You don't even have to do that. Behind the scenes, Vue will track it down if you use a simple selector. Okay, but anyways, in Vue 0.12 and higher, we use this props property here, and I can give it an array of any props that will be passedwe use this props property here, and I can give it an array of any props that will be passed or can be passed to our component. In our case, whenApplied. Done. So now, you can access that value anywhere within this component. Let me show you. Let's do a simple ready here. And when the component is ready to go, and then we'll say alert this.And when the component is ready to go, and then we'll say alert this. But now, how do we do this? Because there's a dash. Do we have to do this? No. Vue will, behind the scenes, convert that to camelCase, which means I can just say whenApplied. So yeah, why don't we try this out. And real quick here, we'll say hello world, Binding Parent Callback Method 2:18So yeah, why don't we try this out. And real quick here, we'll say hello world, and then view this in the browser. So if I switch over to Chrome, sure enough, there it is. We fetched that value. Okay, but even cooler, we can reference an expression here. So if I were to say setCoupon, and if we have a setCoupon method within the Vue instance that is bound to demo, then we can handle that like this.within the Vue instance that is bound to demo, then we can handle that like this. Let's go back to app.js, and we'll say methods, setCoupon. And once again, all that I will do here is alert setCoupon to show that we did trigger it. Okay, next, how do we exactly call this? Because right now, well, it's just sort of a pointer to the function. How do we trigger the function? And the answer is just trigger it wherever it is appropriate. Invoking Callback from Child 3:05How do we trigger the function? And the answer is just trigger it wherever it is appropriate. So in this case, our little dummy example, if the coupon is foobar, then we update the message, and maybe we also notify the parent. This.whenApplied. That is a function, so we will trigger it and pass through the current coupon value. Now, just to reiterate, right here, we bound this to the setCoupon method,Now, just to reiterate, right here, we bound this to the setCoupon method, in this case, on the parent. So now that will be fired. It will accept the coupon, and then we'll just alert for the time being this value. All right, so let's try this out. Back to Chrome, and I'll give this a refresh. We'll type foobar, tab away, and there you go. We triggered a method on the parent.We'll type foobar, tab away, and there you go. We triggered a method on the parent. And what's nice is this is actually a very explicit way to go about it, and that will make debugging quite a bit easier. And even more, as opposed to just firing an event or dispatching an event using this.$dispatch, well, you can also return values. So, for example, if I said return thanks or something like that, well, you can fetch that right here and alert the response. Storing Coupon on Parent 4:17well, you can fetch that right here and alert the response. And that can be useful in some situations. Foobar, tab, and there you go. We set the coupon, and then we fetch the response back in the child component. So now I think we have the answer to the homework from the previous video. Let's just bring this back really quick to what we had before. And now, within index.html, we wanted to display the coupon.Let's just bring this back really quick to what we had before. And now, within index.html, we wanted to display the coupon. So that means, well, why don't we just store the coupon on this instance? Right here, we'll say this.setCoupon is equal to coupon. Now, you might be wondering, well, why are we doing $set? Why don't we just do what we did before, like this? And the answer is, yeah, you can still do this just as long as you have something like this. If you do, then this is fine.just as long as you have something like this. If you do, then this is fine. What's nice about $set, though, is you can set something on your data object even if it hasn't been declared there. So this, in fact, would be maybe a cleaner way to go about it. Okay, so now we've set a coupon property on our data, and we are binding this h1's value, or innerHTML, to that coupon. Let's try it. FooBar, tab, and now we gained access to it. Conditionally Showing Coupon 5:33Let's try it. FooBar, tab, and now we gained access to it. So why don't we do this? You entered the coupon code, and then grabbed that value. But if we were to come back and refresh, we see that right there, which is a little odd because we haven't typed anything. I don't want to show that until we have entered a coupon. So this is easy enough. We can come back and say vshow if we do, in fact, have a coupon.So this is easy enough. We can come back and say vshow if we do, in fact, have a coupon. If coupon is null, don't display the h1. But as soon as the user does enter a correct coupon code, in this case just FooBar, well, only on that condition do we set the coupon on the parent. Okay, so why don't we try this one out? Refresh, and it is now gone. But if I type FooBar and tab away, now it's displaying. And also on that node, if we type an incorrect one and tab away,But if I type FooBar and tab away, now it's displaying. And also on that node, if we type an incorrect one and tab away, well, that doesn't work because we didn't fire that method on the parent. All right, so that's the bulk of what I wanted to talk about in this video. This is a very cool and explicit way to handle things of this nature. So let's see if there's any final little steps we want to do here before we view an actual real-world example of this. We have our template, we have our props, we have some data. Here, we're really just doing that to be super explicit. So if you wanted to remove that, then you could call validate directly here,Here, we're really just doing that to be super explicit. So if you wanted to remove that, then you could call validate directly here, and that would be fine. But yeah, if we switch back, other than that, this is actually pretty clean. And once again, it just doesn't take that many lines of code to handle this sort of interaction. All right, so in the next video, we're actually going to hook this up to a real server and figure out how we can query a database, determine if the coupon is real, respond accordingly, all of that good stuff. I'll see you then.determine if the coupon is real, respond accordingly, all of that good stuff. I'll see you then.
