In this guide, we are going to flip it and we're going to see how we can, and the proper name for this is emit, data from a child component and then have access to it inside of the parent.

Now, this is a little bit more complicated than using props. Props are pretty straightforward, you simply take data and you pipe it directly into a component, like we were able to see with our code right here. We were able to create a component and then simply list out the properties that we want to pass into it.

Now, working with the other process of emitting data is going to require a little bit more work and it's going to also introduce us to the concept of methods and having methods that are placed inside of our component, so let's start walking through that.

I think one of the best ways of learning this is going to be to take out our login form here and let's actually make it into its own component, like we've talked about, and then see how we can take the data from this form and pass it up into the dashboard. Let's create a new file, you can see that we have in our source directory, I'll close this assets, we have our components and our views.

The login is not going to be a view, a view is really for a dedicated page, so we're not going to place it there. Instead, we're going to create inside of this components' directory another directory and let's call it auth, short for authentication. This is where we can place our login component, our registration component, and things like that.

Inside of auth I'm going to create a new file and here we'll call it Login.vue, then inside of here I'm just going to run my user snippet and we'll call this the login component. I'm also going to get rid of everything in the template so that we can pull out exactly what we already typed out here in the dashboard. I'm going to paste that in and now we have our template tag.

Now, everything else is still pretty straightforward, so we don't have to make any other changes to simply call this form. We do need to import it now though, let's come up inside of this div tag and I'm going to call the login component, we're not passing any props or anything like that yet, we're just calling the login.

Now we need to import it, coming down here inside the script tag. I'm going to say import login from, and remember the path we used, we used the @ symbol, so we're starting at the root of the source directory, components/auth/login, and that is it. Then coming down we need to register that component, so comma after homepage component, say login, hit save, and that should be everything that we need. Switch over into the browser, you can see if you hit refresh everything there is still working.

We have now successfully created a new component and we've called it directly from the dashboard. We're back to where we started, but you can see we already have a much better looking template. This reads so much better than having to look through all these complicated div tags or anything like that. We can see that we are calling the homepage content component and then the login component and that is exactly what is getting rendered out into the screen.

Now in login, we have a little bit of work to do. We have this email and password and we're binding these directly into the data model. The next step is going to be to add those, so inside of this return statement here I'm going to say email, and this is going to start off just as an empty string, and same thing for password. Password's going to start off as an empty string, if you hit save, everything here, it should now be working.

Let's talk about methods. Whenever you have a component, typically, especially if you want to have any kind of complicated logic inside of it, you need to have custom methods or functions. They are processes that this component is going to be in charge of.

The syntax for adding a custom method inside of view is at the very end, and it doesn't have to be right after data because as you'll see, as we start building out more complex components there's going to be all kinds of functions that we add in here that view provides for us. But for right now, if you have custom methods, or custom functions then you're going to put them usually at the bottom. Type a comma after this data curly brace and say methods, and methods also is going to be an object, so we're going to use curly braces and inside of here I'm going to create a custom function.

Now, I could name this anything, I could name this hiThere and then this is going to be a function, but I want to name it something that I think is a little bit more helpful in explaining what it does. We are going to say here, updateLoginDetails, and then inside of here this is just going to be a regular function, you can run any kind of code in here that you want.

For right now, just to test this out, before we start getting into how we can emit data up to the dashboard, let's just console log some items. I'm going to say console.log and we'll just say this is our data and we'll pass in this.email and this.password.

So whenever you're in a custom method like this, the way that you can get access to the data elements, to what data is in your components' state, you say this. Because we're referring to this component's email and this component's password. Let's just hit save, just like this, and we need a way of actually triggering this. This isn't just going to run at any time, so let's just add a button, we'll remove it later because it's not really necessary at this moment, but if you just add a button tag in here and I'll just say Test it out.

The way that you can a function is pretty cool. You can say @click.prevent and we're going to talk all about what this means. For right now, I want to focus on how we can pass data up, we're going to get into watching for events and those kinds of things later on.

But I'm just going to say @click.prevent and then we can call the name of this function, update login details. I can say updateLoginDetails, just like this and because this is a function that's going to be bound to this click event, we do not need to say updateLoginDetails and call it like a normal function, we can just call it just like this.

Let's hit save here and then switching back into Chrome, I'm going to open up the JavaScript console, because remember we actually want to see the data here. Let me open up to the right just so it's a little bit easier to see. Hit clear and now let's type something. I'll say jordan@example.com and then type in a password. If I click, test it out, you can see that it prints out our data.

It prints out the data of the email and the password. That's pretty cool, we were able to connect and tie directly into our data model here. Then we have a way of starting an event, so we have a way of clicking that and then activating this process, so this updateLoginDetails process, so that, I think, is pretty neat.

I'm going to get rid of this test it out text now that we know it's working and now let's just say login. Now we're not connected to any kind of backend service or anything, we're not going to do that until we get into the API section. For right now, this is all just going to be mocked.

But right now we're just going to focus on passing our username and our password up to the dashboard so that it can do something with it. Now that we have that, if you come down here, instead of just console logging this, what I want to do is I want to emit an event. So I'm going to say this. and then $emit.

When you ever see something like $, what that means is this is going to be a global process available to any view component. So emit is something we don't have to define, we have access to it because we're using a view component.

I want to emit data and then we have to give a name for the type of event we're wanting to emit. I'm going to call it, update. Then from there, what I want to do is pass in the login details. Now, the way that I prefer to do this is to actually wrap it up in a single object.

But before we get into that, I want to just test it out so that we make sure this is working. I'm just going to pass the email first, I'll say this.email, exactly like we were console logging it. We're just grabbing this value here and now that we've set up a way of emitting this data, now we need to go into the dashboard and we have to receive it.

This login component here needs to be able to receive this update. Inside of here, just like we passed in props, I'm going to say here @update. Note, this is the name of the emit event that we just created here. I'm going to say @update and then that equals a function.

We're going to pass this directly into a function. I can say something like, receiveLogin, or something like that, or a very common process though you'll hear is handleLoginDetails, or handleLoginUpdate. Let's do handleLoginUpdate, I think that is a self-explanatory name.

Now we have to create a method here. I'm going to come below components and just like we did before we're going to say, methods and then the name, we have to list off the exact name that we provided here, handleLoginUpdate, then this is going to receive data.

Now, the very first question you may say is, "Where in the world is it getting this data? Because we're not passing in anything here." Well, the way that many JavaScript listeners work, like update or if you have any click events you're listening for, or anything like that. JavaScript, by default, sends an argument, it's the very first argument and you don't have to explicitly say that it's getting it.

Instead, because it's handling some type of event, JavaScript instantly just has access to it, so that's the reason why we didn't have to list it out here because any time you have an event, and you'll notice that the @ symbol in view usually triggers that, just like we listen for the click event right here, same thing in view. We have this event of handleLoginUpdate, it automatically gets access to the data.

Before you do anything with it, let's just console log this and see if we have everything connected. I'm going to say console.log and we'll say dashboard login data and then let's just see what data we have access to. I believe everything's wired up properly.

I'm going to clear this out, hit refresh just to make sure it's working, and now I'm going to say jordan@dev.com, pass in a password. Not that that matters, because remember we're only grabbing the email. If I hit login, now you can see our dashboard login console log is working.

It printed out data and then jordan@dev.com. We've successfully taken our data from our login component and we have passed it up the chain to the dashboard, so this is all working perfectly. In review, what we've done in the last two guides is we've seen how we can pass data to a component using props.

We can pass data from a parent to a child component by passing in props and then that child component can work with it. Now, we have reversed it, we have taken a child component that takes in data and it passes it up to its parent so that the parent can handle and work with any of the data that the child was in charge of. Now you have the ability to have two-way data communication with your components.

Resources

• Source Code