Was sind Vue-Mixins?-View.js-php.cn

Was sind Vue-Mixins?

coldplay.xixi

Freigeben： 2020-12-01 15:53:39

Original

2641 Leute haben es durchsucht

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

Was sind Vue-Mixins?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6. Diese Methode ist für alle Computermarken geeignet.

Mixins

Mixins sind eine sehr flexible Möglichkeit, wiederverwendbare Funktionalität in Vue-Komponenten zu verteilen.

Gemischte Objekte 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.

mixins verstehen, dass es nach dem Verweisen auf die Komponente dem Öffnen eines separaten Raums in der übergeordneten Komponente entspricht, um entsprechende Vorgänge basierend auf den Werten der Requisiten der übergeordneten Komponente auszuführen. Im Wesentlichen sind die beiden unterschiedlich und relativ unabhängig.

Und Mixins führen nach der Einführung der Komponente den internen Inhalt der Komponente wie Daten und andere Methoden, Methoden und andere Attribute mit dem entsprechenden Inhalt der übergeordneten Komponente zusammen. Dies entspricht der Erweiterung verschiedener Attributmethoden der übergeordneten Komponente nach der Einführung.

Einfache Komponentenreferenz:

Übergeordnete Komponente + untergeordnete Komponente>>> Übergeordnete Komponente + untergeordnete Komponente

mixins:

Übergeordnete Komponente + untergeordnete Komponente>>> ist ein bisschen wie das Registrieren von A Die öffentliche Methode von Vue kann zur Verwendung an mehrere Komponenten oder mehrere Vue-Objektinstanzen gebunden werden. Ein weiterer Punkt ähnelt der Registrierung von Methoden in Prototypobjekten, d. h. Komponenten oder Vue-Instanzobjekten. Sie können immer noch Methoden mit demselben Funktionsnamen definieren, um sie zu überschreiben, ähnlich wie bei einer Unterklasse und einer übergeordneten Klasse.

Verwendung von Mixins

Wiederverwendung von Methoden

html

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

Nach dem Login kopieren

Vue.component(&#39;child&#39;,{
    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++)
        }
    }
})

Nach dem Login kopieren

Vor der Verwendung von Mixins muss die foo-Methode in den Komponenten zweier verschiedener Komponenten wiederholt definiert werden. Wenn die Methode komplexer ist, Der Code wird überflüssiger sein. Wenn Sie Mixins verwenden, wird es sehr einfach:

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log(&#39;hello from mixin!----&#39;+this.msg++)
        }
    }
}
var child=Vue.component(&#39;child&#39;,{ 
        template:`<h1 @click="foo">child component</h1>`, 
        mixins:[mixin]
})
Vue.component(&#39;kid&#39;,{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

Nach dem Login kopieren

Hier können die beiden Komponenten zwar auf die in den Mixins definierte Nachricht über this.msg verweisen, aber der Editor hat es versucht und die beiden Komponenten verweisen nicht auf dieselbe Nachricht. aber jeder hat eine neue Nachricht erstellt. Wenn dieselben Daten in einer Komponente definiert sind, wird hier auf die Nachricht in der Komponente verwiesen, nicht auf die in Mixins.

Das obige ist der detaillierte Inhalt vonWas sind Vue-Mixins?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!