[Vuejs]-Vue – Which is better? Extend a component or nested component?

by

6👍

Both ways work, and I can’t really say that one way is correct and the other isn’t, it depends on your requirements.

Extend

  • Extending a base component can get hairy if you want to modify the base component’s template in some way (you can’t really modify part of the base component’s template, you either keep the base template or completely redefine it).
  • You need to make sure that the new template adheres to any requirements that the base component needs for it to work correctly (such as the presence of certain refs, using correct CSS class names, etc.
  • The base and extended components are tightly coupled.

Composition

  • I’d say this is more the "Vue way".
  • You can take advantage of slots.
  • There’s no tight coupling between the child and parent components; they’re completely separate. You can modify the child component’s code as much as you like as long as its interface (props, events, slots, etc) are unchanged.
  • A disadvantage could be that the parent component is a completely separate component from the child; it won’t inherit any props, events, slots (anything) from the child component.

You might want to have a look at functional components if you’re concerned about the overhead of having an extra component with the composition approach.

I rarely extend components, but when I do, it’s because I want to share a common blueprint for a set of related components (the base component isn’t usually functional on its own, I’ve just extracted the common code out).

👤Decade Moon

Leave a comment