Heim > Artikel > Web-Frontend > Wie mischt man Mixins in Vue global?
Mixin in Vue ist eine einfache Möglichkeit, Komponenten wiederzuverwenden. Es kann einige häufig verwendete Logik in Mixins kapseln und sie zur Wiederverwendung in mehrere Komponenten einfügen, wodurch die Code-Wiederverwendungsrate und die Entwicklungseffizienz verbessert werden. Vue hat in Version 2.2.0 die globale Mixin-Funktion eingeführt, mit der Mixin in alle Komponenten eingefügt werden kann. In diesem Artikel wird die Durchführung eines globalen Mixins in Vue vorgestellt und dessen Vor- und Nachteile erläutert.
Um ein Mixin global in Vue zu mischen, müssen wir die Funktion Vue.mixin
verwenden. Diese Funktion akzeptiert ein Mixin-Objekt als Parameter und dieses Mixin-Objekt kann dieselben verschiedenen Eigenschaften und Methoden wie die Komponente definieren. 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 createdJetzt stellen wir global fest, dass alle Komponenten auf die Methoden im
myMixin
-Objekt zugreifen können. Was passiert also, wenn wir eine Eigenschaft oder Methode mit demselben Namen wie das Mixin in der Komponente definieren? Die Mixin-Priorität von Vue folgt den Regeln von unten nach oben und von links nach rechts, d. h. Eigenschaften oder Methoden mit demselben Namen in später definierten Mixins oder Komponenten überschreiben vorherige Eigenschaften oder Methoden. Zum Beispiel: myComponent createdIm obigen Beispiel haben wir zwei Mixins (mixinA und mixinB) und eine Komponente (myComponent) definiert. Darunter sind die erstellte Hook-Funktion und die Foo-Methode beide in mixinA und mixinB definiert, und eine gleichnamige Foo-Methode ist auch in myComponent definiert. Am Ende überschreibt Vue entsprechend der Priorität der Eigenschaften oder Methoden mit demselben Namen im später definierten Mixin oder der Komponente. Das endgültige Ausgabeergebnis ist:
rrreee
Dies bedeutet, dass die Eigenschaften oder Methoden mit demselben Namen im Mixin und die Komponente sind für das Überschreiben der Eigenschaften oder Methoden im Mixin verantwortlich. Vor- und Nachteile globaler MixinsObwohl globale Mixins problemlos Geschäftslogik in Mixins kapseln und in mehreren Komponenten wiederverwenden können, gibt es auch viele potenzielle Probleme. VorteileDas obige ist der detaillierte Inhalt vonWie mischt man Mixins in Vue global?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!