Vue Mixins
Definición : Es un mecanismo híbrido proporcionado en Vue para reutilizar eficientemente el contenido de los componentes. 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.
Comprensión : después de que se hace referencia a un componente, es equivalente a abrir un espacio separado en su componente principal, y las operaciones correspondientes se realizan de acuerdo con el valor pasado por los accesorios del componente principal, pero los dos son independientes entre sí.
Una vez introducido el componente, los mixins fusionan el contenido interno del componente, como los datos, el método y otros atributos, con el contenido correspondiente del componente principal, que es equivalente a la introducción de varios atributos del componente principal.
- Referencia de componente simple: componente principal + componente secundario >>> componente principal + componente secundario
- mixins: componente padre + componente hijo >>> nuevo componente padre
Uso : método reutilización
html
<div id="app">
<child></child>
<kid></kid>
</div>
js
Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
methods:{
foo(){
console.log('Kid foo()'+this.msg++)
}
}
})
Antes de usar mixins, llamar al método foo en dos componentes diferentes requiere definiciones repetidas, si el método es más complicado, el código será más redundante. Con la ayuda de mixins, se vuelve muy simple:
let mixin={
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('hello from mixin!----'+this.msg++)
}
}
}
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin]
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
mixins:[mixin]
})
Aunque aquí, los dos componentes pueden usar this.msg para referirse al msg definido en los mixins, pero el editor lo intentó, los dos componentes no se referían al mismo msg, pero cada uno creaba un nuevo msg. Si se definen los mismos datos en el componente, aquí se hará referencia al mensaje en el componente en lugar de a los mixins.
Cobertura del método
Si define repetidamente el mismo método en el componente mientras hace referencia a mixins, el método en los mixins se sobrescribirá.
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin],
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
En este momento, si hace clic en la etiqueta h1, se imprimirá en la consola "Child foo () 1". 3. En este momento, si hace clic en la etiqueta h1, "Child foo () 1" se imprimirá en la consola.
Combinar ciclo de vida
let mixin={
mounted(){
console.log('mixin say hi')//先输出
},
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('mixin foo()'+this.msg++)
}
}
}
let vm=new Vue({
el:"#app",
data:{
msg: 2
},
mounted: function(){
console.log('app say hi')//后输出
},
methods:{
foo(){
console.log('Parent foo()'+this.msg)
}
}
})
AÑADIR:
mixins: Ambos componentes tienen la misma lógica y se pueden utilizar, crear una carpeta mixins, definir un código de reutilización de mixins (los mixins son objetos)
export const showMixin = {
data(){
return {
xx:xx
}
},
methods: {
xx() {
xx=xxx
}
}
}
Luego impórtelo en el componente. Si el componente y los mixins tienen los mismos datos, el componente tiene prioridad
import {
showMixin } from '../mixins/xxx';
export default {
mixins: [showMixin]
Introducción global:
main.js
Vue.mixin ({
created(){
const xx = xxx;
}
})