So far, as we've been building out components such as this homepage content component, it's really just been hard-coded. But if we had to build all of our components in isolation, that wouldn't really lead to a very dynamic application, and the whole point of building these JavaScript centric applications is being able to be dynamic and being able to adjust and react to data changes.

So let's talk now about how we can have components communicating with each other. And we're gonna break this into a few different guides because this is really one of the most critical concepts when it comes to building out a view application, so I wanna make sure that you understand it at each stage.

So in this guide, we're going to discuss the concept of props. Now props, it's just a name that is short for properties, and they are really just what they sound like. They are properties of the component, but the cool thing about Vue is you can pass properties directly to the components that you're working with.

So we're gonna take a base case example, and we're gonna update this content component, so make sure that you have your server running and I'm gonna open up visual studio code, and we're gonna look at this homepage content component that we originally built out and we hard-coded everything in, so I'm going to have this file open, and then this file, and we're gonna start to extend this out.

So it's still going to really be a presentation component but we're gonna start to make it a little bit more dynamic. So let's come down here and add a script tag, so I'm going to add a script tag just like this and it is going to contain some of the logic for this process.

So I'll say, export default, and then inside of curly braces, I'm going to provide the name, so remember this name is Homepage Content, and now I want to pass in some data. So I wanna make sure that I am able to receive props, and so I give the name Props, and props as a object, and then I'm gonna name and list off the properties that I wanna receive.

So the very first one is going to be Subtitle, so I'll say Subtitle and then you have to list the type of data that you expect to receive, so Subtitle is gonna be of type string. So I'm going to save this and I'm gonna replace this middle paragraph tag, so inside of here, give two curly braces, and we'll just say Subtitle, and then close it off.

Now right now, we're not actually passing in Subtitle, we're going to do that here shortly, but if you switch over into the browser, you can see that's gone, and if you open up the JavaScript console, you can see we don't have any errors, so, so far, this is looking good.

So how do we pass in this Subtitle prop? Well, if you go to dashboard, and you go to the homepage content component, right inside of this tag, you can pass in Subtitle, just like this, and say equals, and then as a string, put the content that you want to provide.

So here, lets just say, "Hi there," just to make sure this is working. So if I hit save and come back, you can see that this now says "Hi there." So we have done it, we are sending data from one component to another one. And hopefully you can see that that really didn't take too much work.

Let's walk through the process one more time. So we have the component where we're calling it from the Vue, from the parent component, and you simply name off the prop that you wanna provide and then you provide a value. Then inside of the child component, you have to do a couple of things.

You have to list off the prop along with the different name and the data type that you're expecting to get, and then from there, you can access it just like a regular variable. And so this is where things get pretty neat because you can see, we could make this component say and do anything that we really need it to do. Let's extend this just a little further before we take it and move on to working with other ways that you can communicate with your components.

So we have our subtitle here and it just says "Hi there," and lets imagine that we didn't want to hardcode this value in. Well what we can do is we can bind data directly into this prop, and the way that you do that is you add a colon right in front of where it says Subtitle here, and now what I'm going to do is get rid of everything here and now let's just call this subtitleContent.

This is gonna be connected directly into the dashboard data model. So if you come down here into your data model, we're gonna add some new content. So I'm gonna say subtitleContent, spelled out exactly like that, and now we're gonna say "Hi from the Dashboard." Hit save, and now if you come back, you can see it says "Hi from the Dashboard."

So just to traverse what we've done, we've created a data element right here, so this is living within the state of our dashboard. From there, we are binding that directly to the Subtitle prop, and we're passing that content directly through and then that in turn gets passed to this homepage content component right here.

So this is, I think, a really nice way of being able to understand how you can pass data directly from one component to another one. So let's come, now that we know that we have everything wired up properly, now let's actually add some live data.

So I'm going to, for this subtitle, say manage your development projects, and that's gonna be all we wanna say right there, you can see that that is now perfectly updated. If you open up the JavaScript console, you'll see we do not have any errors, so everything here is working properly. Just to play around with this a little bit more, let's just add one more item. So you can add as many different props as you want, so we have subtitle here, and to add a second one, we could just add a second prop just like this.

So instead of saying Subtitle, lets just say marketingMessage, something like that, and then inside of here, we're going to bind it, to a marketingMessage data element, so we can come back here, and add that as well, marketingMessage and just say, sign up today to get started for free, hit save.

Now what we need to do is come and call that one directly from our homepage content component. So remember that we called this the marketingMessage as a Prop. So we have to call it with the same name here, marketingMessage and then list it off in the prop list, so marketingMessage, and that is also a string.

As we go through the course, we'll pass in more than just strings. You can pass in arrays, objects, anything like that, any type of JavaScript data type you can use. So now you can see, let's come back here, make sure you hit save, hit refresh, and there you go, sign up today to get started for free.

So we have now taken a bland, just plain type of presentation component and with just a few lines of code, we have made it into a component that can accept data, from a parent, just like we have right here, where we have passed in these live prop data values, and now that is what is rendering on the screen.

So this is a way of being able to give a direct connection from one component to another one and allows you to organize your code in a way that makes sense.

Now in the next guide, we're going to look at the opposite type of communication, so, so far we are seeing how we can pass data to a child component, in the next guide we're going to see how a child component can send data up the chain to a parent.

Resources

• Source Code