Detaillierte Erläuterung der Schritte zur Verwendung von Mixins in Vue.js

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Mixins in Vue.js ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von Mixins in Vue.js? Schauen Sie mal rein.

Ein sehr häufiges Szenario: Es gibt zwei sehr ähnliche Grundfunktionen, aber es gibt genügend Unterschiede zwischen ihnen Komponenten? Oder eine Basiskomponente erstellen und dann genügend Requisiten definieren, um Nutzungsszenarien leicht zu unterscheiden?

Keiner der beiden Ansätze ist perfekt: Wenn Sie sie in zwei völlig unterschiedliche Komponenten aufteilen, erhöht sich möglicherweise das Risiko, dass beide Komponenten gleichzeitig geändert werden müssen, wenn sich Anforderungen ändern (funktionale Änderungen). Dies verstößt gegen die „DRY“-Prämisse. Andererseits können zu viele Requisiten schnell unübersichtlich werden und die Betreuer oder sogar Sie selbst dazu zwingen Den Kontext dieser Requisiten verstehen zu müssen, bevor man sie verwenden kann, kann sehr enttäuschend sein.

Die Mixins von Vue sind eine sehr praktische Methode zur Programmierung, denn letztendlich besteht die praktische Programmierung darin, den Code durch die kontinuierliche Reduzierung beweglicher Teile verständlicher zu machen. (Michael Feathers hat zu diesem Punkt ein tolles Zitat). Ein Mixin ermöglicht es Ihnen, eine Funktionalität zu kapseln, damit Sie es in verschiedenen Komponenten Ihrer Anwendung verwenden können. Wenn das Mixin korrekt erstellt wurde, Sie sind rein – sie modifizieren oder ändern Inhalte nicht außerhalb des Bereichs der -Funktion , sodass Sie sie an mehreren Stellen ausführen können und solange die Eingabewerte gleich sind. Sie erhalten immer sehr zuverlässig die gleichen Ergebnisse. Das ist wirklich leistungsstark.

Lernen Sie Mixins kennen

Mixins sind eine sehr flexible Möglichkeit, wiederverwendbare Funktionalität in Vue-Komponenten zu verteilen. Ein MixinObjekt kann beliebige Komponentenoptionen enthalten. Wenn Sie ein Mixin-Objekt als Komponente verwenden, werden alle Optionen des Mixin-Objekts in die Optionen der Komponente selbst gemischt.

Kastanie

Nehmen wir an, wir haben ein paar verschiedene Komponenten, deren Aufgabe es ist, Zustands-Boolesche Werte, ein Modal und einen Tooltip umzuschalten. Diese Tooltips haben bis auf diese Funktionalität nicht viel mit Modalen gemeinsam: Sie sehen anders aus, sie werden unterschiedlich verwendet, aber ihre Logik ist ähnlich.

//modal
const Modal = {
 template: '#modal',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
//tooltip
const Tooltip = {
 template: '#tooltip',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

Wir können daraus Logik extrahieren und wiederverwendbare Teile erstellen:

const toggle = {
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
const Modal = {
 template: '#modal',
 mixins: [toggle]
};
 
const Tooltip = {
 template: '#tooltip',
 mixins: [toggle]
};

duang – Ein kleines und einfaches :chestnut: Lassen Sie uns wissen, dass Mixins so interessant, praktisch und praktisch sind, um einige wiederverwendbare Funktionen zu kapseln.

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 auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von Mixins in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!