Maison > Article > interface Web > Comment mélanger globalement des mixins dans Vue ?
Mixin dans Vue est un moyen simple de réutiliser des composants. Il peut encapsuler certaines logiques couramment utilisées dans des mixins et les injecter dans plusieurs composants pour les réutiliser, améliorant ainsi le taux de réutilisation du code et l'efficacité du développement. Vue a introduit la fonction global mixin dans la version 2.2.0, qui peut injecter du mixin dans tous les composants. Cet article présentera comment effectuer un mixin global dans Vue et discutera de ses avantages et inconvénients.
Pour mixer un mixin globalement dans Vue, nous devons utiliser la fonction Vue.mixin
. Cette fonction accepte un objet mixin comme paramètre, et cet objet mixin peut définir les mêmes propriétés et méthodes que le composant. Vue.mixin
函数。该函数接受一个 mixin 对象作为参数,而这个 mixin 对象中可以定义和组件相同的各种属性和方法。
const myMixin ={ methods: { // ... } } Vue.mixin(myMixin)
现在,我们全局发现 myMixin
const mixinA ={ created() { console.log('mixinA created') }, methods: { foo() { console.log('mixinA foo') } } } const mixinB ={ created() { console.log('mixinB created') }, methods: { foo() { console.log('mixinB foo') } } } const myComponent ={ created() { console.log('myComponent created') }, mixins: [mixinA, mixinB], methods: { foo() { console.log('myComponent foo') } } } new Vue({ el: '#app', components: { 'my-component': myComponent } }) // 输出 // mixinA created // mixinB created // myComponent createdMaintenant, nous découvrons globalement que les méthodes de l'objet
myMixin
sont accessibles par tous les composants. Alors, que se passe-t-il lorsque l'on définit une propriété ou une méthode portant le même nom que le mixin dans le composant ? La priorité de mixage de Vue suit les règles de bas en haut, de gauche à droite, c'est-à-dire que les propriétés ou méthodes portant le même nom dans les mixins ou les composants définis ultérieurement remplaceront les propriétés ou méthodes précédentes. Par exemple : myComponent createdDans l'exemple ci-dessus, nous avons défini deux mixins (mixinA et mixinB) et un composant (myComponent). Parmi elles, la fonction hook créée et la méthode foo sont toutes deux définies dans mixinA et mixinB, et une méthode foo du même nom est également définie dans myComponent. Finalement, Vue remplacera en fonction de la priorité des propriétés ou méthodes du même nom dans le mixin ou le composant défini ultérieurement. Le résultat final est :
rrreee
Cela montre que les propriétés ou méthodes du. même nom dans le mixin et le composant porte le même nom. Sera responsable du remplacement des propriétés ou des méthodes dans le mixin. Avantages et inconvénients du mixage globalBien que le mixage global puisse facilement encapsuler la logique métier dans des mixins et la réutiliser dans plusieurs composants, il existe également de nombreux problèmes potentiels. AvantagesCe 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!