1. Introducción a los mixins
Los mixins son una forma muy flexible de distribuir funciones reutilizables en los componentes de Vue.
Los objetos mixtos pueden contener cualquier opción de componente.
Cuando un componente usa un objeto mixto, todas las opciones del objeto mixto se mezclarán con las opciones del propio componente.
1.1 Comprender los mixins
Después de hacer referencia al componente, es equivalente a abrir un espacio separado en el componente principal para realizar las operaciones correspondientes en función del valor de los accesorios del componente principal. En esencia, los dos siguen siendo distintos y relativamente independientes.
Y los mixins son después de que se introduce el componente, es fusionar el contenido interno del componente, como datos y otros métodos, métodos y otros atributos con el contenido correspondiente del componente principal. Es equivalente a que los diversos métodos de atributo del componente principal se hayan ampliado después de la introducción.
- Referencia de componente simple:
componente principal + componente secundario -> componente principal + componente secundario - mixins
componente padre + componente hijo -> nuevo componente padre
Es un poco como registrar un método público de Vue, que puede estar vinculado a múltiples componentes o múltiples instancias de objetos de Vue.
Otro punto es similar al registro de métodos en objetos prototipo. En objetos de instancia, componentes u objetos de instancia de Vue, aún puede definir métodos con el mismo nombre de función para anular, un poco como una subclase y una clase principal.
2. Uso de mixins
- Definir un objeto mixin
const testMixin = {
data(){
return{
count:1,
}
},
methods: {
test(){
console.log('mixin')
}
},
beforeMount() {
this.test()
},
}
export{
testMixin
}
- Mezclar el objeto de mezcla en el componente actual
<template>
<div class="template1">
组件一
</div>
</template>
<script>
import {
testMixin } from '@/mixins/mixin.js'
export default {
data() {
return {
};
},
mixins:[testMixin],
methods: {
},
mounted() {
},
};
</script>
- efecto
3. Características de los mixins
3.1 Los métodos y parámetros no se comparten entre los componentes
Recuento de parámetros en el objeto mixto
const testMixin = {
data(){
return{
count:1,
}
},
methods: {
test(){
console.log('mixin')
}
},
beforeMount() {
this.test()
},
}
export{
testMixin
}
El recuento de parámetros en el componente 1 realiza la operación de +1
<template>
<div class="template1">
template1中的count:{
{
count}}
</div>
</template>
<script>
import {
testMixin } from '@/mixins/mixin.js'
export default {
data() {
return {
};
},
mixins:[testMixin],
methods: {
},
mounted() {
this.count ++;
},
};
</script>
<style lang="stylus" scoped>
.template1{
color : red;
}
</style>
El recuento de parámetros en el componente 2 no se opera
<template>
<div class="template2">
template2中的count:{
{
count}}
</div>
</template>
<script>
import {
testMixin } from '@/mixins/mixin.js'
export default {
data() {
return {
};
},
mixins:[testMixin],
methods: {
},
mounted() {
},
};
</script>
<style lang="stylus" scoped>
.template2{
color : blue;
}
</style>
Al
observar los valores de recuento generados en los dos componentes, puede ver que el valor de recuento se cambia en el componente 1, y el valor de recuento en el componente 2 sigue siendo el valor inicial mezclado en el objeto.
3.2 El valor de las opciones del objeto (como métodos, componentes, etc.), las opciones se fusionarán (conflictos clave, los componentes cubrirán el objeto mixto)
Métodos de mezcla en objetos.
const testMixin = {
data(){
return{
count:1,
}
},
methods: {
test1(){
console.log('test1 from mixin')
},
test2(){
console.log('test2 from mixin')
}
},
beforeMount() {
},
}
export{
testMixin
}
Método en componente
<template>
<div class="template1">
template1中的count:{
{
count}}
</div>
</template>
<script>
import {
testMixin } from '@/mixins/mixin.js'
export default {
data() {
return {
count:10
};
},
mixins:[testMixin],
methods: {
testSelf(){
console.log('testSelf from template1')
},
test2(){
console.log('test2 from template1')
}
},
mounted() {
this.testSelf();
this.test1();
this.test2();
},
};
</script>
La salida de impresora
3.3 es la opción de la función (como creada, montada, etc.), se fusionará y se llamará. La función de gancho en el objeto mixto se llamará antes que la función de gancho en el componente
La consola mezclada con la función del objeto.
const testMixin = {
data(){
return{
count:1,
}
},
methods: {
},
mounted() {
console.log('mixin')
},
}
export{
testMixin
}
Consola en función de componente
<template>
<div class="template1">
template1中的count:{
{
count}}
</div>
</template>
<script>
import {
testMixin } from '@/mixins/mixin.js'
export default {
data() {
return {
};
},
mixins:[testMixin],
methods: {
},
mounted() {
console.log('template1')
},
};
</script>
La salida de la estación de impresión
3.3 mixin contiene una solicitud asincrónica
Cuando se incluye una función de solicitud asíncrona en la mezcla, y necesitamos usar el valor de retorno de la función de solicitud asíncrona en el componente, no obtendremos el valor de retorno, de la siguiente manera:
// mixin.js
const testMixin = {
data(){
return{
}
},
methods: {
remote(){
new Promise((resolve,reject) => {
let a = 1;
setTimeout(()=>{
resolve(a)
},1000)
}).then(res =>{
console.log(res,'mixin');
return res
})
}
},
mounted() {
},
}
export{
testMixin
}
// test.vue
<template>
<div class="template1">
template1
</div>
</template>
<script>
import {
testMixin } from '@/mixins/mixin.js'
export default {
data() {
return {
};
},
mixins:[testMixin],
methods: {
},
mounted() {
console.log(this.remote(),'template1')
},
};
</script>
Solución: no devuelva el resultado, vuelva directamente a la función asincrónica
// mixin.js
const testMixin = {
data(){
return{
}
},
methods: {
async remote(){
let result = await new Promise((resolve,reject) => {
let a = 1;
setTimeout(()=>{
resolve(a)
},1000)
})
return result;
}
},
mounted() {
},
}
export{
testMixin
}
// test.vue
<template>
<div class="template1">
template1
</div>
</template>
<script>
import {
testMixin } from '@/mixins/mixin.js'
export default {
data() {
return {
};
},
mixins:[testMixin],
methods: {
},
mounted() {
this.remote().then(res =>{
console.log(res,'template1')
})
},
};
</script>
4. Resumen
La diferencia con vuex:
- Vuex: Usado para la gestión de estados. Las variables definidas en él se pueden usar y modificar en cada componente. Luego de que el valor de esta variable sea modificado en cualquier componente, el valor de esta variable en otros componentes también se modificará en consecuencia;
- Mixins: Puedes definir variables compartidas y usarlas en cada componente, luego de ser introducidas en el componente, cada variable es independiente entre sí, y la modificación del valor no se afectará entre sí en el componente;
Diferencia de los componentes públicos
- Componentes comunes: Introducir componentes en el componente principal es equivalente a dar un espacio independiente en el componente principal para que lo utilicen los componentes secundarios y luego pasar valores de acuerdo con los accesorios, pero en esencia los dos son relativamente independientes;
- Mixins: una vez introducido el componente, se fusiona con los objetos y métodos del componente, lo que equivale a ampliar los objetos y métodos del componente padre, que puede entenderse como la formación de un nuevo componente;