Applications generally have more than one piece of functionality, so it's rare to just have a single main component. You can break down the functionality into sub-components and give each a separate unique name.
- [Tutor] Applications usually have more than one piece of functionality, so it's rare to just have a single main component, we can break down our functionality into set components and give each a separate and unique name. Our application is going to have three main components, one for listing our appointments, one for adding appointments and one for searching through the appointments, our main file is going to hold all three, so we're going to break these into different files and we'll give each one an individual name.
Now, each component is going to need to communicate with the main component and receive some information, we do that through something called props, they look just like HTML properties and will pass along data from the main component down to the sub components. In addition to that, in the main component, we're going to need to import the sub components and register their names, so that we can use tags like these, so let's take a look at how that works. So first, I'm going to create a new file and I'll call it AppointmentList.vue, this is going to be in the main process folder here and this component is going to have some of the content in this main App.vue file, so I'm going to take this div right here with our template and just put it in here for now, we'll fix it in just a minute and then we're also going to need this stylesheet, we're not going to need a stylesheet in this main component, because it's not going to have any of the code for our main page, so let's cut it out of here and then we'll go into this component and just paste it for right now, so we'll switch back into our App.vue component, since we now have all the data for the new component in a separate file, we'll need to import this file into the main component, we'll do that with an import statement at the beginning of our script, this will import whatever this file exports into this object right here.
Now we'll need to register the name of this new component, so to do that, we're going to put that right after this data attribute and we'll create a new property called components and this will be an object with the list of the components. So right now, we have a single component and we're going to register it as appointment-list and pass along the data from our file, so that's in the AppointmentList object, that's right here.
Now we can add this tag into our template, so in our template, we'll use appointment-list and in here, we'll pass along the information for our appointments through a prop, a prop starts with a colon and then it has a name, I'm going to call it appointments and we'll set that to the variable, that we have in this component called theAppointments, remember theAppointments receives some data from our JSON call right here, so after the application starts up and this component is created, we will have all this information into this local variable, which is also right here and so we'll pass that into our AppointmentList.
Because I know I'm going to need additional components, I'm going to create a div, I'll give it an ID of main-app here and I'll put this appointment-list component within. Right, let's go ahead and save this, we'll need to modify our AppointmentList.vue file, so that the application will show up again, right, so in this file, I'm going to create a template tag and I'm going to add a div, remember that all elements need a sort of container div, I don't really need to give that an ID or a class and then I'm going to use this unordered list with the class of appointment-list, this is just a CSS class, it's not really related to hard tags, it's really just using this style down here.
In addition to the template, we're going to need a script tag, which is going to export some variables, so we're going to need first of all, a name, I'm going to call this AppointmentList and remember this is just a name to identify this component from other components, so although it's optional, it's a good idea to put it in and then we're going to need to list the props that we're receiving into this component from the main component, there's only one, so we'll say props and props is actually on array and we're going to call this appointments, so we're receiving a prop called appointments from this App.vue file, here it is and we're receiving that into this props property, so that it's available to this v-for loop and in this loop, we're not going to have a variable called theAppointments anymore, we're just going to use the name of the prop.
Alright, so you can see that everything looks great, now let's go ahead and add a few other items in here, so we'll go ahead and in addition to the petName, we'll add all of the different properties, just so you can see something different and we'll wrap these in a div. Sometimes if your page doesn't load, go ahead and hit the reload button.
Now you can see that all the data came in and we've organized this application, so that we have one main component, that consists of right now a single sub component, this is a great way to set up your file, so that the functionality for each component is in a separate place.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering