All right, welcome back. So in this episode, I want to extract this form we created into its own component. And in the process, we're going to realize that, hmm, we need some way to communicate from a parent component to a child component, and then the exact same thing in reverse. Okay, let's get going. I'm going to create a new component here, and we'll call it AssignmentCreate. All right, let's export and add our template. And if I switch back, we can grab this whole form here and move it over. Okay, so now in terms of data, it looks like we need a method called add, and we have a property called newAssignment.

Okay, so now in terms of data, it looks like we need a method called add, and we have a property called newAssignment. So let's do that now. Return newAssignment, and then I also need a method called add. And we'll just say alert add for now. Okay, easy enough. Let's now switch back to our Assignments component. I can import that, AssignmentCreate. And then don't forget, we have to register this as a component. And now I can use it.

And then don't forget, we have to register this as a component. And now I can use it. Okay, so I can say Assignment create, like so. And yes, so far so good, but let's think about it. Right now we have our form. We are tracking the data. And by the way, that means I can come back and remove that here, and then down here. Okay, so we're tracking that, but when we submit the form, all we do is trigger an alert. So let's see if that works. Try to create one, and yeah, I get the alert.

So let's see if that works. Try to create one, and yeah, I get the alert. But now of course, I need to append to that array. Okay, well once again, why don't we just copy this whole method and move it over into our new component like this. And immediately when I do this, I think you see the roadblock. This component now needs access to an Assignments array, but I don't have an Assignments array here. That exists on the parent component. And trust me, you're going to run into this all the time, where you think to yourself,

Just like that. And you know what? I think that would work. So if I come back and refresh, read chapter 5, submit, and yeah, no problem. And I'm sorry, I do need to clear out that input real quick. Come down and we'll say this.newAssignment returns to an empty string. But yeah, even though this works, it feels a little weird to me. So for example, we have our Assignments array, and then we have this component for creating a new Assignment, and that too has all of the Assignments. So it just kind of feels weird to me, even though it technically works.

The child, on the other hand, will communicate back to the parent by omitting an event. This is a very common setup. So let me show you what that looks like. To omit an event, we can, let's comment this out. We can say this.omit, and note the $ sign. That just makes it clear that we're calling a view-specific method. Omit an event with the name, whatever you want. Why don't we call it add? And then as the second argument, we can pass through any data we want. In this case, we should probably send through the new assignment.

It doesn't make an AJAX request. It sort of just holds up a bullhorn and says, hey, I have a new assignment if you want to do anything with it. So it kind of relinquishes control. That way, we can bring control back to the Assignments component. And here's how we do that. Remember a couple episodes ago, we learned you can listen for events like this. But as it turns out, you can also listen to custom events in the exact same way. So here, our custom event was called add. So that's what I'm going to listen for.

So here, our custom event was called add. So that's what I'm going to listen for. Or don't forget the shorthand of @add. Okay, so now, if we scroll back down, we still have the same method from the last episode. The only difference is we're not going to send through that new assignment. And just to be clear, that's coming from this second argument or parameter here. Okay, cool. So let's update this. And yeah, I think this is going to work.

And I think this is a much better way to go about it. Okay, now let me show you something. Open up Vue DevTools and click on this Timeline tab here. So notice this displays all mouse or keyboard or component specific events. It's really useful. So for example, if I add a new task, you'll see it's picking up on those keyboard events. And if I hit Submit here, our component will fire an event called add. And you can see that represented by this green dot here.

And if I hit Submit here, our component will fire an event called add. And you can see that represented by this green dot here. So we fired an event called add, and notice the data that we sent through. Okay, so now if we scroll up, the parent listens for that event. And then it calls its own method. That method receives the parameter, which is right here. And then it takes care of pushing to the assignments array. So again, notice what I said. The parent communicates to the child through props. The child communicates back to the parent by emitting an event.