Vue3 Mixins

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

Veamos un ejemplo sencillo:

Ejemplo

//Definir el objeto mixin const myMixin = { created() { this.hello() }, methods: { hello() { console.log('¡Bienvenido al ejemplo de mixin - EJEMPLO!') } } } //Definir una aplicación que utiliza el mixin const app = Vue.createApp({ mixins: [myMixin] }) app.mount('#app') //=> "¡Bienvenido al ejemplo de mixin - EJEMPLO!"

Pruébalo »

Combinació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 nivel interno (una capa de profundidad de propiedades), y en caso de 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 el mismo método. En la salida se puede ver que las dos opciones se han combinado.

Ejemplo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VueEjemplo de prueba - Ejemplo(ejemplo.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id = "app"></div> <script type = "text/javascript"> const myMixin = { data() { return { message: 'hello', foo: 'ejemplo' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message: 'goodbye', bar: 'def' } }, created() { document.write(JSON.stringify(this.$data)) } })

El resultado de salida es:

{"message":"goodbye","foo":"ejemplo","bar":"def"}

Pruébalo »

Las funciones hook con el mismo nombre se combinarán en un array, por lo que todas serán llamadas. Además, los hooks del objeto mixin se llamarán antes que los hooks del propio componente.

const myMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('组件钩子被调用')
  }
})

// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

Las opciones cuyo valor es un objeto, como methods, components y directives, se combinarán en el mismo objeto. Cuando las claves de dos objetos entren en conflicto, se tomarán los pares clave-valor del componente.

Ejemplo

const myMixin = { methods: { foo() { console.log('foo') }, conflicting() { console.log('from mixin') } } } const app = Vue.createApp({ mixins: [myMixin], methods: { bar() { console.log('bar') }, conflicting() { console.log('from self') } } }) const vm = app.mount('#app') vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"

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

vm.foo();
vm.bar();
vm.conflicting();

Según el resultado de salida, si en la opción methods se encuentra el mismo nombre de función, la instancia de Vue tiene mayor prioridad y ejecutará su salida.

Mixins globales

También se puede registrar el objeto mixin globalmente. ¡Cuidado con su uso! Una vez que se utiliza un objeto mixin global, afectará a todas las instancias de Vue creadas posteriormente. Cuando se usa adecuadamente, se puede inyectar lógica de procesamiento para objetos personalizados.

Ejemplo

const app = Vue.createApp({ myOption: 'hello!' }) //Inyectar un manejador para la opción personalizada 'myOption'. app.mixin({ created() { const myOption = this.$options.myOption if (myOption) { document.write(myOption) } } }) app.mount('#app') // => "hello!"

Pruébalo »

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

Otras extensiones