Vue.js Mixins

Los mixins definen una parte de métodos o propiedades computadas reutilizables. Un objeto mixin puede contener cualquier opción de componente. Cuando un componente usa un objeto mixin, todas las opciones del objeto mixin se mezclarán con las opciones del propio componente.

Veamos un ejemplo sencillo:

Fusión de opciones

Cuando el componente y el objeto mixin contienen opciones con el mismo nombre, estas opciones se mezclarán de manera adecuada.

Por ejemplo, los objetos de datos se fusionan superficialmente (a un nivel de profundidad), y cuando hay conflicto con los datos del componente, los datos del componente tienen prioridad.

En el siguiente ejemplo, la instancia de Vue y el objeto mixin contienen los mismos métodos. Del resultado de salida se puede ver que las dos opciones se fusionaron.

Llamada de mixin
Llamada de componente

Si en la opción methods hay nombres de función iguales, la instancia de Vue tendrá mayor prioridad. Como en el siguiente ejemplo, tanto la instancia de Vue como el objeto mixin contienen la misma función en la opción methods:

HelloWorld 方法
start 方法
Main：相同方法名

En el ejemplo anterior, llamamos a los siguientes tres métodos:

vm.hellworld();
vm.start();
vm.samemethod();

En el resultado de salida, en la opción methods, si se encuentran nombres de función iguales, la instancia de Vue tiene mayor prioridad y se ejecutará su salida.

Mixin global

También se puede registrar el objeto mixin globalmente. ¡Ten cuidado al usarlo! Una vez que se usa un objeto mixin global, afectará a todas las instancias de Vue creadas posteriormente. Si se usa adecuadamente, puede inyectar lógica de procesamiento para objetos personalizados.

Usa los objetos mixin globales con precaución, porque afectarán a cada instancia de Vue creada individualmente (incluyendo plantillas de terceros).