Einführung in verwandte Operationen des Vue-Mischens (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die relevanten Vorgänge des Vue-Mischens (mit Beispielen). Ich hoffe, dass er Ihnen als Referenz dienen wird. helfen.

Definition: Mischen ist eine sehr flexible Möglichkeit, wiederverwendbare Funktionen in Vue-Komponenten zu verteilen. Mixins können beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein Mixin-Objekt verwendet, werden alle Optionen des Mixin-Objekts in die Optionen der Komponente selbst gemischt.

Beispiel:

//定义一个混入对象
var myMixin={
    created:function(){
        this.hello();
    },
    methods:{
        hello:function(){
            console.log('hello from mixin');
        }
    }
}
//定义一个使用混入对象的组件
var Component = Vue.extend({
    mixins:[myMixin]
})
var component = new Component();=>hello from mixin

Option merge

Wenn Komponenten und Mixins Optionen mit demselben Namen enthalten, werden diese Optionen entsprechend gemischt.
Zum Beispiel werden Datenobjekte intern rekursiv zusammengeführt, und wenn ein Konflikt mit Komponentendaten besteht, haben die Komponentendaten Vorrang.

var mixin ={
    data:function(){
        return{
            messageL:'hello',
            foo:'abc'
        }
    },
    created(){
        console.log('混入对象的钩子被调用')
    }
}
new Vue({
    mixins:[mixin],
    data:function(){
        return{
            message:'goodbye',
            bar:'def
        }
    },
    created:function(){
        console.log('组件钩子被调用')
        console.log(this.$data);
        // => { message: "goodbye", foo: "abc", bar: "def" }
    }
})

Optionen, deren Werte Objekte sind, wie z. B. Methoden, Komponenten und Anweisungen, werden in dasselbe Objekt gemischt. Wenn die Schlüsselnamen zweier Objekte in Konflikt geraten, wird das Schlüssel-Wert-Paar des Komponentenobjekts verwendet.

var mixin={
    methods:{
        foo:function(){
            console.log('foo')
        },
        conflicting:function(){
            console.log('from mixin')
        }
    }
}
var vm = new Vue({
    mixins:[mixin],
    methods:{
        bar:function(){
            console.log('bar')
        },
        conflicting:function(){
            console.log('from self')
        }
    }
})
vm.foo()//foo
vm.bar()//bar
vm.conflicting()//form self

Globales Mix-in

Sie können Mix-in-Objekte auch global registrieren. Achten Sie auf die Verwendung! Sobald ein globales Mixin-Objekt verwendet wird, wirkt es sich auf alle später erstellten Vue-Instanzen aus. Bei richtiger Verwendung können benutzerdefinierte Objekte mit Verarbeitungslogik ausgestattet werden.

//为自定义的选项myOption注入一个处理器。
Vue.mixin({
    creted:function(){
        var myOption = this.$options.myOption;
        if(myOption){
            console.log(myOption)
        }
    }
})
new Vue({
    myOption:'hello'
})

Verwenden Sie globale Mixins mit Vorsicht, da sie sich auf jede individuell erstellte Vue-Instanz auswirken (einschließlich Vorlagen von Drittanbietern). In den meisten Fällen sollte dies nur auf benutzerdefinierte Optionen angewendet werden, wie im obigen Beispiel. Es kann auch als Plugins verwendet werden, um doppelte Effekte zu vermeiden.

Benutzerdefinierte Optionszusammenführungsstrategie

Benutzerdefinierte Optionen verwenden die Standardstrategie, die darin besteht, vorhandene Werte einfach zu überschreiben. Wenn Sie möchten, dass benutzerdefinierte Optionen mit benutzerdefinierter Logik zusammengeführt werden, können Sie eine Funktion zu Vue.config.optionMergeStrategies hinzufügen:

Vue.config.optionMergeStrategies.myOption=function(toVal,fromVal){
    return mergedVal
}

Für die meisten Objektoptionen können Sie die Zusammenführungsstrategien von Methoden verwenden:

var strategies = Vue.config.optionMergeStrategies;
strategies.myOption = strategies.methods

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Video-Tutorial auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonEinführung in verwandte Operationen des Vue-Mischens (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!