When we have nested components, we need a way to communicate and send data between them. We know that we can pass data to child components using props, but we don't know yet how to pass data from the child to the parent. Let's figure this out by working on our example. In our plan picker, we want to be able to pick a plan.
How can we do this? Maybe. It's a good idea to add a data property to our component to define if the plan is selected or not. We can also have a method to update the selected data.
Let's call this method when the user clicks on the plan. To do that, we will listen to the click event using vOn on the root element of the component's template. Let's check in the browser to see if it works. I will click on a plan, and then to see if it actually worked, I will inspect the component's data.
And it did work. That's cool. Let's use a class binding to dynamically add the ActivePlan class when the plan is selected. Notice that because the class name includes a hyphen, we have to wrap it in quotes.
Now when I click on a plan, we get to see that it is selected. That's cool, but I'm also able to select more than one plan. That's not right. We need somehow to make the select method unselect the previous plan if there is one.
So if I select the first plan and then click on the second, the first plan should not be selected anymore. But how can we know from inside the component? if there is another plan selected. We could probably use props, but the parent is not aware if a plan is selected.
What we can do here is to let the parent know when the user selects a plan. js, we use custom events. To send a custom event, we use the special $emit method. The first argument is the name of the event we want to emit.
The name of the event can be absolutely anything you'd like. Let's emit an event here called Hi There. Why not? We can inspect all the emitted events using View DevTools inside of the Timeline tab.
Now, every time I click on a plan, you can see the Hi There event being emitted. That's pretty cool, right? For what we want to build the event name. will be something like Select.
The second argument is the data that we want to pass along with the event. It is optional, so you can omit events without any data if you want to, just as I did with the Hi There example. In our case, we will pass the name of the plan so that the parent knows which plan got selected. Just so you know, the event data is often called the payload.
So, if you see this term anywhere, it refers to the data that's being passed through. Now we can listen for the select event in the parent, which is the plan picker component using vOn. This is the same syntax we use for DOM elements like the clip or the key down. So we will say vOnSelect equals and then pass it an expression to run.
when the event takes place. Let's call the SelectPlan method that we will implement soon. That's it! When the Select event takes place, we trigger the SelectPlan method.
Now let's think what we need to implement in the PlanPicker component. The PlanPicker needs to know which plan the user has selected. To store that, I will add a data property, SelectedPlan. Let's also add the select a plan method that will receive the plan coming from the events payload and It will set it to the selected plan Let's give it a shot.
I will click on the first plan and inspect the plan picker component great the selected plan has been properly set to the single if I click on the second plan and Refresh the DevTools. The selected plan updates accordingly. That's great. So let's go back to the plan component.
Now that the parent knows which plan is selected, we don't need to store it twice. So I will remove the selected data and I will add a prop so the parent can tell the plan if it's selected or not. We can also remove where this dot selected is being set in the select method with that in place. Over in the template for the plan picker, we can compare the current plan being looped over with the selected plan.
And if they match, then that plan is selected and the selected prop will be true. If we try it now in the browser, it works great. The user is able to pick only one plan. And the plan picker knows which plan is selected.
Let's review what we did in this video. When the plan is clicked, we call the select method. The select method emits a custom event. The payload of this event is the plan to be selected.
Then, in the parent, we listen for the select event. And When it happens, we call the SelectPlan method. This method gets the plan from the payload, and it sets it to the data. Then, we pass the selected prompt to the individual plans by comparing the plan to the selected plan, which results in a boolean value passed to the selected prop.
Finally, in the template, we use a class binding to conditionally apply. the ActivePlan class based on if the plan is selected. When we have nested components, we need a way to communicate and send data between them. We know that we can pass data to child components using props, but we don't know yet how to pass data from the child to the parent.
Let's figure this out by working on our example. In our plan picker, we want to be able to pick a plan. How can we do this? Maybe.
It's a good idea to add a data property to our component to define if the plan is selected or not. We can also have a method to update the selected data. Let's call this method when the user clicks on the plan. To do that, we will listen to the click event using vOn on the root element of the component's template.
Let's check in the browser to see if it works. I will click on a plan, and then to see if it actually worked, I will inspect the component's data. And it did work. That's cool.
Let's use a class binding to dynamically add the ActivePlan class when the plan is selected. Notice that because the class name includes a hyphen, we have to wrap it in quotes. Now when I click on a plan, we get to see that it is selected. That's cool, but I'm also able to select more than one plan.
That's not right. We need somehow to make the select method unselect the previous plan if there is one. So if I select the first plan and then click on the second, the first plan should not be selected anymore. But how can we know from inside the component?
if there is another plan selected. We could probably use props, but the parent is not aware if a plan is selected. What we can do here is to let the parent know when the user selects a plan. js, we use custom events.
To send a custom event, we use the special $emit method. The first argument is the name of the event we want to emit. The name of the event can be absolutely anything you'd like. Let's emit an event here called Hi There.
Why not? We can inspect all the emitted events using View DevTools inside of the Timeline tab. Now, every time I click on a plan, you can see the Hi There event being emitted. That's pretty cool, right?
For what we want to build the event name. will be something like Select. The second argument is the data that we want to pass along with the event. It is optional, so you can omit events without any data if you want to, just as I did with the Hi There example.
In our case, we will pass the name of the plan so that the parent knows which plan got selected. Just so you know, the event data is often called the payload. So, if you see this term anywhere, it refers to the data that's being passed through. Now we can listen for the select event in the parent, which is the plan picker component using vOn.
This is the same syntax we use for DOM elements like the clip or the key down. So we will say vOnSelect equals and then pass it an expression to run. when the event takes place. Let's call the SelectPlan method that we will implement soon.
That's it! When the Select event takes place, we trigger the SelectPlan method. Now let's think what we need to implement in the PlanPicker component. The PlanPicker needs to know which plan the user has selected.
To store that, I will add a data property, SelectedPlan. Let's also add the select a plan method that will receive the plan coming from the events payload and It will set it to the selected plan Let's give it a shot. I will click on the first plan and inspect the plan picker component great the selected plan has been properly set to the single if I click on the second plan and Refresh the DevTools. The selected plan updates accordingly.
That's great. So let's go back to the plan component. Now that the parent knows which plan is selected, we don't need to store it twice. So I will remove the selected data and I will add a prop so the parent can tell the plan if it's selected or not.
We can also remove where this dot selected is being set in the select method with that in place. Over in the template for the plan picker, we can compare the current plan being looped over with the selected plan. And if they match, then that plan is selected and the selected prop will be true. If we try it now in the browser, it works great.
The user is able to pick only one plan. And the plan picker knows which plan is selected. Let's review what we did in this video. When the plan is clicked, we call the select method.
The select method emits a custom event. The payload of this event is the plan to be selected. Then, in the parent, we listen for the select event. And When it happens, we call the SelectPlan method.
This method gets the plan from the payload, and it sets it to the data. Then, we pass the selected prompt to the individual plans by comparing the plan to the selected plan, which results in a boolean value passed to the selected prop. Finally, in the template, we use a class binding to conditionally apply. the ActivePlan class based on if the plan is selected.