As applications grow to be more complex, sometimes you'll need to create even further sub-components. Take a look at how that works.
- [Instructor] As our Applications grown to be more complex, sometimes we need to create even further sub-components. So let's take a look at how that works. What we want to do is create a different App Structure that looks a little bit more like this. We're going to take the appointment list, make it it's own component and then create another sub-component called appointment list items. And our App will actually have as many of these as there are records in our data. So this is going to be pretty similar to what we did in the previous video and should be a good review and practice for working with components.
Let's go ahead and take a look. So we have this component called AppointmentList.vue, and we want to create another sub-component. So let's go ahead and add another file right here. This one's going to be called AppointmentListItem.vue and we're going to go into this appointment list and grab this list item right here, we're going to paste that in here for now.
And we're also going to need this stuff right here because we're no longer going to use this UL to actually generate the loop. We're going to use a different component name. Let's go ahead and take that out of there. And what we'll do is create another element, in here called appointment item. And this appointment item will have our loop variables that we had before.
So, in order to use this appointment item tag, we're going to need to register it as a component right here. So right after props, we're going to create a component section here and component is going to be an object, and the one that we need is called appointment item. And that is going to get some information from our file that we just created right here. That file is going to return the information in an object, we're going to call that AppointmentListItem.
Let's go ahead and give these a little bit of breathing room here. Because we want to get this information from our appointment list item file, we're going to need to import it. And we'll get it from this file. In addition to that, we're going to need to pass the data for each appointment into our appointment list item file. So we're going to need to do that here.
We'll create a prop for each one of the appointments we'll call it appointment. And it's going to get that information from this item right here. So this item here is a temporary variable that as we loop through the different appointments remember, these appointments are coming in from a prop that we get from the original document. So now, we're getting this prop right here, and in our appointment list we get that information, we loop through the different appointments, and now we're passing this new variable into this other file.
Now, because I am not using any special keys, or any special bind attributes, I don't need this extra </div> right here, so I can get rid of it. We have a UL that is a single component that contains all of our other information. Let's go ahead and shift that a little bit to the left, and save it. We should be good here, except that, of course, this is not going to display because this file doesn't really have anything meaningful in it. So let's go ahead and work with that file.
It should be pretty easy. We're going to need a template tag, and all this stuff is going to go into the template. Previously, we were calling these variables item, and usually when I do a loop I like to call my variables items, so if I was doing a loop and I had a number of elements, right in this tag right here, I like to call that item. But, since we're passing the data into a variable called appointment, over here, we'll also need to change that to appointment.
Alright, so now we need our script tag, and then an export default. We're going to need a name for this component. Again, this name is optional, but it's a good idea to put it in there so that you can debug things a little bit easier. And we'll call this PetAppointmentItem, we're going to need to make sure that we get the props or at least define the props, which we get from the previous file. Our prop is called appointment.
So remember, this prop is coming from the previous file, and it comes in this bind, right here, let's go ahead and save this. And you should see all the data come back in here. Creating these nested sub component is going to bring up some issues later on in our application, that you would be able to see, unless you were running a more complex application. So although it seems like a lot of work for not a lot of benefit, you'll see that we're going to learn some things that we would only learn if we had this sort of more complex structure.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering