Validar Props con Vuejs 2
Validar Props con Vuejs 2
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


En este tutorial vamos a ver cómo podemos extender la funcionalidad de Componentes con Mixins en Vue.js 2, una buena forma de poder reutilizar y compartir mucho código.

Los Mixins en Vue.js 2 no son más que objetos donde podemos definir todo lo que un componente tiene, data, methods o created por ejemplo, una vez lo utilicemos en un componente éste tendrá a su disposición lo que se ha definido en el Mixin.

Cada componente tiene una propiedad llamada mixins que acepta un array, aquí es donde le podemos pasar todos los Mixins que necesitemos.

Si un Mixin y el Componente que lo utiliza tienen definidos métodos iguales, prevalecerá el Componente ante en Mixin, así que ten este detalle en cuenta.

Un ejemplo de Mixin sencillo sería el siguiente.

La salida por consola al ejecutar el componente anterior será la siguiente.

Cómo puedes ver, primero se ejecuta el mixin, y a continuación el componente, al tener el método test definido en el mixin y en el componente, el que Vue ejecuta es el del componente cómo hemos dicho antes.

Mixins globales en Vue.js 2

Existe una potente opción en Vue.js 2 y es la de crear Mixins globales, el problema de utilizarlos es que este Mixin se ejecutará cada vez que se cree una instancia de Vue, y eso puede ser un gran problema de rendimiento si no se utiliza bien.

Para crear un Mixin global en Vue.js 2 simplemente deberíamos escribir el siguiente código.

En la aplicación que utilizo para los tutoriales, donde tengo 11 componentes definidos, algunos filtros y directivas, el resultado en consola es el siguiente.

Por lo tanto, ten cuidado si te decides a utilizar Mixins globales ya que puedes tener muchos problemas de rendimiento.

Eso es todo lo que necesitas saber acerca de los Mixins en Vue.js 2, son así de sencillos y potentes.