Decide when to use a component in Vue
As our applications get more complex, it can be really valuable to organize our applications into components. We'll discuss some of the considerations that help us make these decisions. A big factor to consider when making these considerations is when you start seeing logic or styling that you could use elsewhere in the application.
Instructor: [0:00] I have these different ticket types. What I'd like to be able to do is have the ability to purchase these individual tickets, so some bronze tickets, some silver tickets, and some gold tickets rather than just general tickets.
[0:12] I have these details for each of these ticket types. I've got my bronze ticket, my silver, and my gold. What I would like is a section here called ticketTypes, and I'd like to be able select from a dropdown how many bronze I want, how many silver, and how many gold. Let's see how I might do that.
[0:30] Let's have a div that starts with a h3 that says Ticket Types. For these ticket types, I want to have a div that describes each of the ticket types. I'm going to use v-for="type in ticketTypes". Additionally, let's take h4 and render the type name.
[0:54] Next, I'll add a paragraph descriptor for the type.description. Then I'm going to add the select.
[1:04] At this point, I'm feeling slightly concerned. I'm developing a lot of logic and styling that I may want to use elsewhere in my application. For me, this is saying, "Introduce a component." With a component, I'm going to be able to capture the logic here and add in my select boxes. I could try to build the functionality here, but I think it's better to pause and instead create a component.