So verwenden Sie Mixins in Vue

Dieses Mal zeige ich Ihnen, wie Sie Mixin in Vue verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Mixin in Vue?

Vue bietet einen Mischmechanismus – Mixins, der zur effizienteren Wiederverwendung von Komponenteninhalten verwendet wird. 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.

Nach den Komponentenreferenzen in entspricht dies dem Öffnen eines separaten Bereichs in der übergeordneten Komponente, um entsprechende Vorgänge basierend auf den Werten aus den Requisiten der übergeordneten Komponente auszuführen Im Wesentlichen sind die beiden immer noch 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 Eigenschaftsmethoden der übergeordneten Komponente nach der Einführung.

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 und der Hook im Mixin wird zuerst ausgeführt.

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:

Was sind die Spezifikationen für die Vue-Frontend-Entwicklung?

Wie man JS verwendet, um das zu erhalten absolute Position von DOM-Elementen

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