[Vuejs]-Is overriding a global Vue component safe?

4👍

If you are going to wrap existing components like that then you should keep in mind the Liskov substitution principle. <b-icon-fake> can likely be used in place of <b-icon> provided that it:

  • accepts the same props
  • emits the same events
  • exposes the same public methods (if it is used with a ref)
  • behaves in the same way

Most of those points probably do not apply for a simple <b-icon> component.

Also keep in mind the template of your wrapped component now includes an extra <div> around it. This can interfere with styling and things like that.

You can eliminate the additional memory overhead by using a functional component instead, but you will need to write the render function manually to preserve the behavior of the wrapped component. But honestly I wouldn’t worry too much about memory usage unless you have determined it to be an issue (after profiling your app).

In terms of whether it is "good" to do this or not, I can’t say. There are advantages and disadvantages. In my opinion, wrapping components is fine as long as you are the only consumer of the wrapper component and doing so doesn’t affect any existing usage of the wrapped component outside of your code.

Leave a comment