Herencia en Vuejs 2
La herencia en Vuejs 2 es un tema que debemos controlar una vez tenemos unos conocimientos medios avanzados sobre este Framework. Vuejs 2 nos permite varias formas de herencia, a través del uso de Mixins o de Vue.extends. En este tip and trick vamos a cubrir las 2 formas centrándonos más en la última ya que es la que ofrece más ventajas.
Uso básico de Mixins en Vuejs 2
El uso de Mixins en Vuejs 2 es bien simple, podríamos sobrescribir todo lo que necesitemos de nuestro componente de la siguiente forma:
A través de la clave mixins de un componente podemos pasarle un Array de mixins que añadan funcionalidad adicional, de esa forma esa información pasará a pertenecer al componente que está utilizando el Mixin. Este tema queda cubierto en el Curso de Vuejs 2 y Vuex desde 0 con las mejores prácticas.
Extender componentes en Vuejs 2 con Extends
Otra alternativa para utilizar herencia en Vuejs 2 es directamente utilizar extends, de esta forma podremos definir además del script la template y utilizar una que sea común para todos los componentes que la utilicen. La idea es realmente simple, en lugar de tener muchos componentes con la misma funcionalidad, tener uno del que podamos heredar para ahorrar muchas líneas de código, pero no sólo eso, además nuestro código será más fácil de mantener y estará mucho mejor organizado:
De esta forma tan sencilla podemos definir toda la lógica y template en el componente SupportFormBaseInput para después simplemente heredar y utilizarla en el componente SupportFormInputReporter.