>> Sending data down is nice,
let's explore emitting events to bubble data back up.
In this video, we're going to create a form as
a child component to allow you to book
a cabin for your dream cruise.
Remember, events up and props down,
props down, events up.
Your child component end is going to
push an event through its parent,
and then the other child's props will
pick up the values and display them.
Let's create a new component called Booking Form,
we're going to create a form.
Let's put it in the components folder, call it BookingForm.vue.
Once more, we use the snippets to scaffold us
a nice single file component.
What we're going to do is we're going to
configure this component with
a cabins prop to display available cabins,
a new property which is emits to expose the booking created event,
a data item which is cabin index
to store the selected cabin index from a drop-down,
and a method called book cabin to check the cabin index,
and if the validation passes to emit
the event that returns the selected cabinet index.
Let's do that. We're going to go ahead and
add a snippet of code into the script area.
Here we have our props,
which is the cabins array,
the emit here in the property which is bookingCreated,
data, which is returning the cabinIndex,
and this method bookCabin.
Next, let's add a display template, which is a form.
It's a form with a drop-down.
Let's pop that right into the template.
This form loops through the cabins prop
using v4 to create a drop-down list of cabins.
We're going to bind the cabin index
to the model of the select tag,
and that value is returned when the user selects
a cabin by pressing the "Book Now" button.
Let's go ahead and add this form to the host,
which is it's parent.
There's a couple of to-dos here.
We'll go ahead and import the booking form,
which we just created right at the top,
we put it above the booking list so input those two pieces,
and then we're going to add the booking form to the components.
All we have to do here is booking list,
and right here it says,
Add the next component which is booking form.
Then we have to add a method to
handle the booking created event method,
and that's going to be addBooking.
Let's add methods block.
addBooking which we just added,
it creates the selected cabin and
then creates a new booking object,
so I'm going to get down to
the booking list component to update the items booked.
The last thing we have to do is add
the booking form to this area here,
where it's delineated. We'll just save that.
What we've done is we've embedded
the booking form child component and we're emitting
this addBooking method and we're passing
along information about the cruise cabins
that are available when you're booking.
Let's just take a look at how this app ends up looking.
Here we have our application,
and we have a drop-down that's going to be
adding data up and down.
Let's see, we'll add a business and we'll add a first-class cabin.
You can see how if when we keep adding cabin after cabin,
we get more and more information being
passed up and then back down.
You spent a million dollars,
over a million dollars, I think we're doing very well.
I think we should stop here.
But congratulations, you created an app that emits
events and responds to data changes via props.
You're ready to go to the moon.
[MUSIC]