Alright, next up, let's move on to dependency injection, and figure out what that looks like within the context of a Vue application. Let's get going. Okay, so have a look at this example I've set up. Here's my home view, and you can see I'm importing this Quiz component. Now, it would take way too long to fully implement this for a little example, but I've at least created the basic scaffolding. You can see we're passing a quiz object to our component, and of course, it's dummy data here, but in real life, you would be fetching this from your server. Okay, and if we click through to that, yeah, again, this is the basic scaffolding.

So sometimes you'll run into awkward situations where you have to pass a prop down many levels deep. We refer to this as prop drilling. So for example, if I go into the QuizFooter, we then have another nested component for the FooterLinks, and then right here, you can see we are echoing out the name of the quiz. Okay, so that means this many levels deep, we need access to that quiz object. Now maybe we could pass through the name, but at least in this example, we're expecting the full quiz object. All right, so think about that.

the full quiz object. All right, so think about that. We have our top-level quiz. We then need to pass the quiz object to the footer, and that then needs to pass the quiz object to the footer links, and this is just a tiny example. In real life, you may find yourself drilling down four or five levels deep, and often this can just be, if nothing else, a little annoying, where certain components are accepting a prop for the sole purpose of passing it on to a nested prop. So luckily, we do have some options to skirt around this. So in this episode, we'll talk about provide and inject.

So luckily, we do have some options to skirt around this. So in this episode, we'll talk about provide and inject. So it sounds like this quiz prop is pretty important, and we'll need to access it any number of levels deep, and by level, again, I'm talking about a nested component. Okay, so let's do this. I'm going to import provide from vue, and then we're going to provide a key and a value. All right, so now the cool thing is when a component provides a piece of data like we've done here, any of its children, or really any of its grandchildren, can access that data without requiring that we do that prop drilling thing that we're trying to get around in the first place.

data without requiring that we do that prop drilling thing that we're trying to get around in the first place. Okay, so let's see it in action. I'm now going to go into the footer, and then another level deep, and let's see if we can grab that value. We can do it by importing inject, so provide and inject, and then I can say let, what did we call it, key equals inject key. All right, so notice way up here, we are providing a key of key, and then any of its children can then inject key, and that's exactly what we're doing here. Okay, so now just as an example, let's echo out the value and view it in the browser.

can then inject key, and that's exactly what we're doing here. Okay, so now just as an example, let's echo out the value and view it in the browser. So we switch back, and sure enough, there it is. We have our value. And just to prove it to you, if we change it to hello there, if we come back, there we go. All right, so granted, this is kind of a silly example, but it's still incredibly cool when you think about it. If we take a look at our component structure, yeah, Quiz is now providing this piece of data to any of its children, and the children is the key thing here.

If we take a look at our component structure, yeah, Quiz is now providing this piece of data to any of its children, and the children is the key thing here. It's not like it's available globally. Its sibling components can't access it, but any children of Quiz can. So that means if I want to access that key, I don't have to prop drill. I can simply inject it for only the components that require it. Okay, so what else? A couple other things. What about reactive data? So for example, what if I had, let's think of like a name, $name, ref John Doe.

What about reactive data? So for example, what if I had, let's think of like a name, ref John Doe. Okay, and I'm going to pass name like so. Okay, so now name is not just a string John Doe, it is a reactive object. So now if we go all the way down to a nested child, let's inject name using the exact same system. So set name equals inject name, and then way up here, we'll spit out that value. Okay, so if we take a look, oh, what do we have here? Ref is not defined. I'm sorry, I thought my editor imported it.

Ref is not defined. I'm sorry, I thought my editor imported it. There we go. So now, sure enough, we passed John Doe. But what about if we need to change that data? All right, let's talk about some options that are available to you. Just real quick at the very top, just so we can see that the data remains in sync, I will also show the name up here. Okay, so now I see John Doe at the top, and then John Doe right down here. Okay, well, because name is reactive, if we were to change it, and once again, we'll do

So this isn't a requirement, you can keep it like this. But if that is a concern for you, what you could do is create a rule that the only place you can change the name is in the parent where it's being provided. So if you took that approach, you might provide an object here, where you send through the name, or because the key and the value are the same, I can just only provide that. And then maybe we could provide the equivalent of a mutator. And this would be a function that would be responsible for changing the name. So maybe if we call, you know, changeName, whatever this might be, and I could then say name.value equals changed, just as a little example. So notice the logic for updating name now exists within the parent.

name.value equals changed, just as a little example. So notice the logic for updating name now exists within the parent. And if we want to trigger that change, we simply pass a reference to this function to the child. All right, let's give it a shot. I now go back to QuizFooterLinks. And we'll say, how about this, make it a button. And we'll say, when you click on me, yeah, I want to call this function here. So if I want to do that, we need to accept it, name and changeName. And then we'll say call changeName.

So if I want to do that, we need to accept it, name and change name. And then we'll say call change name. So yeah, again, this is kind of a cool approach. Change name is now a function that's being declared all the way within the parent. So the child is just calling that function. All right, let's see if it works. Come back, notice we have John Doe and John Doe down here. If I click on it, sure enough, we update the button. And also that's reflected in the parent. So you might find that that's a cleaner, more structured way to go about it, especially

And also that's reflected in the parent. So you might find that that's a cleaner, more structured way to go about it, especially as you start creeping into larger projects. All right, something to think about at the very least. So finally, to finish this up, we decided that a quiz needs to be available all the way down in this nested child. So let's bring that back. We want the name of the quiz. And I'm just going to say right here, $quiz equals inject quiz. So I want to inject quiz from the parent.

And I'm just going to say right here, let quiz equals inject quiz. So I want to inject quiz from the parent. That means in the parent, I need to provide quiz. So we'll do this reformat. And then I will say provide quiz, like so actually, I'm sorry, let's say props and then do props.quiz. And that should do it. All right, so let's clear this out and view it in the browser. And there we go. All the way down here, it's difficult to see if I bring it up, we can drill down.