In this lecture, we will look into how to send data to components, how to send data to components and how to get back data from components. So, this data is often referred to as props. So, now we will look into how to pass data from parent component A child component as well as getting bad data from child component to parent component. So, we already have a data component we created in the last lecture and inside this component there is nothing much more data I showed that I am a data component. So, we will try to send this data this string from the parent component for example, we are going abroad right. So, instead abroad, we will import data component.

We will register the component under the components property. Now, we can use the component and we can say data this so if I refresh it, okay, we get nothing because there's nothing in here. So we'll just have a heading that says need to have one route. So we'll have data as a root div and inside this will have an h tag h1 title says data component. Alright, so we can see data component. And so now what we want to do is we want to send data into this component, right?

So, for example, let's say I want to have a history tag. I want to have a history tag. Here, I want to show display a message. Right. So this message, I want to send it from the parent component, which is a broad view. To send that message we will use something called as props.

So the data component is expecting a prop within a message. So we can declare it inside a script tag, we can say props. Inside props, we can say the name of the property and expecting in our case it is message. And this is optional, but it's better to have it. It's a good practice to have this. So generally, you would Just limited message and that would be it.

But in terms of good practice, it's usually a good thing to do this here we can declare the type, it is a string, and is it required and it is true. So these are kind of like additional properties to that one little prop I mentioned required is true right for this problem. So if I save it and insert a parent component, we are not sending any data, we are not sending the message prop which it expects, right? So if I go to our website, and if I open the console log, we will get a view warning, missing required prop message because we declared the type as true. And it's a type string. All right.

So now to send this message, what we can do is inside the data component, we can say, colon, message. And inside this message, I can pass a data property. So let's create a data property that says message. And let's say hello from data component. And here we are going to say, message. So if I save it, we can see that.

So if I refresh it, the error sign goes away because we are sending in the data. So we can also send him multiple props. For example, if it's also requiring each Prop, you can see each type should be number 10. Safe, quiet. False. So since age is not mandatory, we can just say required is false.

And if I save it, we don't get an error regarding age because required is false. And set up inside our parent component. We can have another property called his age. And in today's I can send them the value I'm sorry, so guess to display the age here. Age and age. So ages 10 credits, so that is sending data from parent component to child component.

But how do we send data from child component Back to parent component. So we will use something called as Emmet. Okay, so we'll do one thing. We will remove data component from our abroad view. And we'll import log in component. And we'll register it as login and send the components property.

And we can use it, login. I save it. I'm getting an error count resolved login components, right? Its components. So if I save it have the login form here, inside the login form. I can have a button and say submit and give it a type of Submit.

And we can have an eventlistener submit and we can prevent the default behavior by saying Prevent, and we can say so Bitcoin. So instead of script tag, we can have a property inside the methods property, we can declare our method submit form. For now we'll just a console log console dot log form has been submitted, right. So if I save it and press enter, I could become sold message form has been submitted. So now what I want to do is instead of a broad view, I want to create a paragraph or I want to rather have a heading tag say message and inside this message, I will remove this message and I basically want to know if the form has been submitted or not. So firstly, form has not been submitted.

Right. So we can even have an emoji here. So if I see form has not been submitted, so what we want is, so when I go to log in form, and I hit the submit button, I want the message of here in the abroad view to change. Alright, so what we can do is, instead of console logging it, we can say this dot dollar emit on Submit. Alright, so basically what's happening is we are kind of like sending out a trigger to App dot view that the form has been submitted right. so here we can receive the trigger by going add on submit submitted.

So upon receiving this trigger from the login component, we can trigger our own method inside the app component. So on submit am creating the method form submit So if I save it, and if I go to methods, and if I say form submitted, and inside this, I tried to change the message to this dot message equal to form submitted, right? Let's try. If I go into our website and if I hit submit, the message gets changed. So just to go over what happened here is inside the login component, when the form is being submitted, we are emitting an event and this event name is on Submit. It's a custom event that we designed, we are receiving is on submit event inside our app you log in is defined and an on submit on this event occurring, we are trying to execute this form submitted method and inside this form submitted, we are changing the message to form submitted.

So if I refresh it, we have form has not been submitted, click form submitted. Right. So this is how to send data from parent component to child component using props, and getting back data from child components to parent components by using events. Right. In the next lecture, we will look into lifecycle hooks of a component. That should be interesting.

I'll see you in the next one.