>> It's really common to have to
handle flows of data between components.
How do you do that?
By using props and events.
Keep in mind, props down, events, up.
Changing a prop involves
a one-way flow from parent to child and not vice-versa.
We're going to send data down from the Host.vue
which is our parent component to a child component.
Let's go ahead and create that child component.
I'm going to create a new file,
that it's going to be called BookingList.vue.
We'll go ahead and type vue and use
that file snippet extension to just scaffold out all the elements.
Let's see how this works.
We need to get the child component ready to accept props by
listing them as an object with types delineated.
We're going to show the bookings for our cruises.
Let's add the props as an array of bookings.
We're going to add that right into our script block like this.
We're going to pair our props in the child with computed property.
Computed properties are useful for doing
computational tasks in a component.
We're going to take the dataset in the bookings array and
derive the total cost of a booking for display.
Let's add a computed property.
That can go right under the props.
Do watch out for commas [inaudible] .
Now we have props and a computed property.
Now let's go ahead and add a template to
display the info that we are computing.
We'll add this section and we'll pop it
right into the template, just like that.
We're going to grab the booking data, loop through it,
display the cabins, and derive
the total cost with that computed property.
Now we have to make
the child component visible to the parent components.
Let's go back to Host.vue.
At the top of this script block,
we're going to just import BookingList
from BookingList.vue,
and we have some code completion,
which works very nicely.
We're going to add it to a components object here.
We'll just add it right here in
components and we can pop it right at the top.
There's a to-do element in here,
so we're going to add another component later on.
Then the last thing we have to do is add
the component using kebab case.
We're going to pop it right into that to-do area right here,
where it's this to add the looking form and add the booking list.
We'll add the booking list right here.
We're going to add a booking form loop.
You can see that kebab case, booking list,
and then bookings, the prop is going to be sent through
this parents and down to the child,
where it's going to be handled.
Let's check out our page as it's been building and rebuilding.
You can see that we have embedded a prop to send booking data
down to the child component and you can test it by changing
a value in the bookings data and watching it propagate.
We would be looking for the bookings information
here we have the name of sample price is zero.
It changed that price to 100,
and we're in host, remember.
Then you can see that it changes right away, $100.
In our next video, we're going to go ahead
and create a form so that we can
start sending data from the child back up to the parent.
Stay tuned. [MUSIC]