que sont les mixins de vue

Les mixins Vue sont un moyen très flexible de distribuer des fonctions réutilisables dans les composants Vue. Les objets de mélange peuvent contenir des options de composants arbitraires. Lorsqu'un composant utilise un objet mixin, toutes les options de l'objet mix seront mélangées dans le composant. .option elle-même.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, Vue version 2.9.6 Cette méthode convient à toutes les marques d'ordinateurs.

mixins

Les mixins sont un moyen très flexible de distribuer des fonctionnalités réutilisables dans les composants Vue.

Les objets mixtes peuvent contenir des options de composants arbitraires.

Lorsqu'un composant utilise un objet mixin, toutes les options de l'objet mixin seront mélangées aux options du composant lui-même. Les

mixins comprennent que le composant

après avoir été référencé équivaut à ouvrir un espace séparé dans le composant parent pour effectuer les opérations correspondantes basées sur les valeurs​​ des accessoires du composant parent. Essentiellement, les deux sont toujours distincts et relativement indépendants.

Une fois le composant introduit, les mixins fusionnent le contenu interne du composant tel que les données et autres méthodes, la méthode et d'autres attributs avec le contenu correspondant du composant parent. Cela équivaut à cela après l'introduction, diverses méthodes de propriété du composant parent ont été développées.

Référence du composant simple :

Composant parent + composant enfant>>> Composant parent + composant enfant

mixins :

Composant parent + composant enfant> ;>> le nouveau composant parent

est un peu comme enregistrer une méthode publique de vue, qui peut être liée à plusieurs composants ou à plusieurs instances d'objet Vue. Un autre point est similaire à l'enregistrement de méthodes dans des objets prototypes. Dans les objets d'instance, c'est-à-dire les composants ou les objets d'instance Vue, vous pouvez toujours définir des méthodes avec le même nom de fonction pour les remplacer, un peu comme une sous-classe et une classe parent.

Utilisation des mixins

Réutilisation des méthodes

html

<div id="app">
    <child></child>
    <kid></kid>
</div>

js

Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Child foo()&#39;+this.msg++)
        }
    }
})
 
Vue.component(&#39;kid&#39;,{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Kid foo()&#39;+this.msg++)
        }
    }
})

Utilisation des mixins Auparavant, l'appel de la méthode foo dans deux composants différents nécessitait des définitions répétées. Si la méthode était plus complexe, le code serait plus redondant. Si vous utilisez des mixins, cela devient très 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(&#39;kid&#39;,{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

Bien qu'ici, les deux composants puissent référencer le msg défini dans les mixins via this.msg Cependant, l'éditeur a essayé que les deux composants référencés ne soient pas les mêmes. pareil. Pas le même message, mais chacun a créé un nouveau message. Si les mêmes données sont définies dans un composant, le msg du composant sera référencé ici, pas celui des mixins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!