3.5 Passing Data From a Child Component to a Parent

So we've come pretty far with the process of being able to create a new quiz, but now we're at a point where we actually need to save it, we need to persist it. Cuz right now if we just hit Save, we're just laying some console logging, but we really want to create a new card here that's gonna represent this particular quiz. So let's go back over to our code, and let's go into our Create Quiz component and let's handle this. Now, I was thinking about this after creating the last lesson, and I kinda thought, we're not actually saving the list we're just creating a quiz. So let's just say that we're going to saveQuiz at this point, we're not creating a new list. And this is going to be saveQuiz like that, so let's go ahead and save it. And now we should come back over here, if were would refresh this, we would get the same functionality, everything is going to continue to work, just as it did before. Okay, so what I wanna do now is instead of just logging something, I wanna be able to send this information somewhere, so that I can actually add to that quizzes list and actually create a new quiz, which lives up here in the data section of our app.view component. Which might seem rather complicated but there's a process that you can follow, that is built into view to handle such things. So we've seen already that if we want to pass information from a parent, which in this case is app.view to a child, which we see here with the quiz list. Via this props of these props property, we can do so using that by simply doing a bind on that particular value within the properties quizzes and we can send information down from the parent to the child. But now we wanna go in the other direction, we wanna go from the child, createQuiz up to the app.view. So the way that, is we do that is we come into our function here, our saveQuiz function and we use another function called this.$emit. And what $emit is going to do is it's going to allow us to send, or to create an event that's going to be sent back up the tree. That can be handled or that can be watched for similar to how an event can be watched for on a click or something like that, v-on:click, we can now create these custom events and pass them back up the food chain. So the first thing that we have to do is we have to specify the name of this. So we're gonna call this create-quiz, and then what we can also do is we can pass into this some sort of value. So we could pass integers, or strings, or Booleans, or whatever have you, but we can also pass objects. So in this case I wanna pass a new object that has two properties, title which is going to be this.titleText, and description which is going to be this.descriptionText. So this is why we were doing that model binding before, so now I'm going to emit an event which is going to create this new event called create quiz. It's going to pass with it this object with two properties, it's gonna send it back up the food chain. So now all we would need to, is we need to handle watching for that on the parent side, so the way that we do that, is we once again do a v-on. So we're gonna say v-on, and in this case, we're watching for a particular type of event called create-quiz. So let's go ahead and Copy that, we'll come back over here so on create-quiz we're gonna handle that with a new function and we're just gonna call that createQuiz, just like that. So we'll save that, now in order to handle this, we need to create a function inside our methods collection in this particular components just like we've done in other places. So we can pick a spot here anywhere, I'll just put it up here so we don't have to go too far. So we'll say methods and within here we are going to create a new method called createQuiz. So this will be a createQuiz, now the interesting thing here is that, when we have created this event, we are sending an object. We're sending this new object with a title and the description and property. Now, when we create this event that we're listening for on the parent, we don't have to specify anything with parameters or open close parenthesis or anything like that. But it's there and it's being passed along with this event, so when I come down to createQuiz I can specify the parameter is going to be an object, and we'll just call this newQuiz. So now we're getting data into this particular method from where we came from. So now all we have to do is we just need to create a new quiz and we need to push it onto this quizzes data, so all we need to do is say, this.quizzes.push. We're going to push a new object unto here which is going to have a title of newQuiz.title, and a description of newQuiz.description. And then we're just going to initialize the cards collection to an empty array. So let's go ahead and save that, we'll put in our semicolon let's Save that. So now we have created this new event using the emit function. We're emitting a new event, passing it up to our app.vue, and we're processing it here on our parent. So let's come back over here let's go ahead and refresh this page. So now I'm going to show my form, so let's say now I have a Chapter 3. And let's say this is going to be a Description that's fine, and then let's hit Save. And we're still showing our console information because I made changes over here but never saved them. So let's go ahead and save them, we will come back over here let's go ahead and refresh this page. Now let's open up our form this is going to be Chapter 3, and then we'll say Description, like that, and then let's hit Save. And now we get another quiz here, so we see that by default it has Chapter 3 and Description that's what we typed in there. And we get how many cards there are, by default there are zero, but I see a little bit of a problem here. Our form is still open, now we probably don't necessarily want that, we'll probably wanna close that form or change our state back to not editing, we're not creating. And then we're probably gonna wanna clear these out because we're using that two-way binding, those values that we typed in are still in those title text and description text properties. And they're just being held on to so we need to clear those out as well. So let's come back over here to our code, so we're going to emit that event and then after we've emitted that event let's go ahead and say, this.titleText = "", we'll just clear it out, same with the descriptionText. We're gonna set that equal to "", and then we're going say, this.isCreating = "false", and we'll save that. So we'll come back over here we'll refresh everything, make sure it's clean. And because I refreshed the page it's recreating all of our objects within vue.js simply because we're not actually persisting it anywhere. So once I refresh that page, everything's kind of gone, so once again that's one enhancement that you might wanna look into is, persisting this information somewhere, whether it's in local storage or what you, but for now, this will be okay. So, let's go ahead and do this again, we'll say, Chapter 3 and we'll call this a Description, and then we'll hit Save. So, now we've save it we have our new Chapter 3 here, and now we're back to our non-creating state we have a plus button. If I hit plus again, those values are gone so I can do some here, as many as I want, and continue to add and add and add. Okay, so now we're getting far enough to the point that we're able to create new quizzes, but to this point we're not able to see any of the actual data that is inside of these quizzes. And in the next several lessons we're going to go through the process, of being able to view these quizzes individually, and then see all the cards within them.