Decide when to use a component in Vue

Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated a year ago

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.

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today