Verwendung von Mixins in Vue

Dieses Mal werde ich Ihnen die Verwendung von Mixin in Vue vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Mixin in Vue? Hier ist ein praktischer Fall.

Lassen Sie mich über mein Verständnis von Mixins in Vue sprechen

Vue stellt einen Mischmechanismus bereit – Mixins, der verwendet wird, um Komponenteninhalte effizienter wiederzuverwenden. Zuerst dachte ich, es gäbe keinen Unterschied zwischen diesem und Komponenten. . Später fand ich heraus, dass es falsch war. Werfen wir einen Blick auf den Unterschied zwischen Mixins und importierten Komponenten unter normalen Umständen.

Nachdem auf die Komponente verwiesen wurde, entspricht dies dem Öffnen eines separaten Bereichs in der übergeordneten Komponente, 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 Tatsache, dass nach der Einführung verschiedene Eigenschaftsmethoden der übergeordneten Komponente erweitert wurden.

Einfache Komponentenreferenz:

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

Mixins:

Übergeordnete Komponente + untergeordnete Komponente> ;>> neue übergeordnete Komponente

Funktion: Mehrere Komponenten können Daten und Methoden gemeinsam nutzen, nachdem sie mithilfe von Mixin in eine Komponente eingeführt wurden direkt verwendet. Beide Hook-Funktionen werden aufgerufen, wobei der Hook im Mixin zuerst ausgeführt wird.

Das Folgende ist eine Einführung in die Verwendung von Vue Mixin. Die spezifische Einführung lautet wie folgt:

1. Definieren Sie eine js-Datei (mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

Über Verwendung, Vue-Dokumentation Es gibt eine detaillierte Einführung in , hier stellen wir nur vor, wie Mixin in einer Vue-Datei verwendet wird.

2. Mixin in Vue-Dateien verwenden

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Vue-Router, dynamischer Routing-Betrieb, Unterrouting

Verwenden Sie Vue, um Routing-Parameter dynamisch festzulegen

Das obige ist der detaillierte Inhalt vonVerwendung von Mixins in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!