Detaillierte Einführung in die Verwendung von Mixins und Extends in Vue

Vue stellt Mixins bereit und erweitert Konfigurationselemente, was ich in letzter Zeit sehr nützlich fand. Als Nächstes werde ich Ihnen in diesem Artikel die clevere Verwendung von Mixins und Erweiterungen in Vue vorstellen. Freunde, die es benötigen, können darauf verweisen.

Vue stellt Mixins und Erweiterungskonfigurationselemente bereit, die ich in letzter Zeit sehr nützlich fand .

Das Mischen von Mixins und Vererbungserweiterungen

Schauen Sie sich an, was in der offiziellen Dokumentation steht. Tatsächlich können beide als Vererbung verstanden werden, und Mixins empfangen Objektarrays (kann verstanden werden). als Mehrfachvererbung), erweitert ein Objekt oder eine Funktion (kann als Einzelvererbung verstanden werden).

Hook-Funktion erben

const extend = {
 created () {
  console.log('extends created')
 }
}
const mixin1 = {
 created () {
  console.log('mixin1 created')
 }
}
const mixin2 = {
 created () {
  console.log('mixin2 created')
 }
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
  console.log('created')
 }
}

Konsolenausgabe

extends created
mixin1 created
mixin2 created
created

• Fazit: Priorisieren Sie den Aufruf der übergeordneten Klasse, die von Mixins und Extends geerbt wird. Die durch Extends ausgelöste Priorität ist höher im Vergleich zur getesteten Warteschlange

• push(extend, mixin1, minxin2, seine eigene Hook-Funktion)

• , die Wertevererbungsregeln von watch sind die gleichen.

Methoden erben

const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
  return {
   name: 'name'
  }
 }
}
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}

• Schlussfolgerung: Die Unterklasse wird erneut deklariert und die Variablen in den Daten werden in The umgeschrieben Die Unterkategorie hat Vorrang.

• Wenn die Unterklasse nicht deklariert ist, basieren die Variablen in den Daten auf der letzten geerbten übergeordneten Klasse.

• Nach dem Testen sind die Vererbungsregeln für Attribute in Requisiten, Methoden und berechneten Werten dieselben.

Das Folgende ist eine separate Einführung in Mixins, erweitert, erweitert

Mixins

Aufruf method: mixins : [mixin1, mixin2]

ist eine Erweiterung der übergeordneten Komponente, einschließlich Methoden, Komponenten, Anweisungen usw. . .

Wenn die Hook-Funktion ausgelöst wird, wird zuerst die Funktion von Mixins und dann die Funktion der übergeordneten Komponente aufgerufen.

Obwohl Sie beim Erstellen eines Mixins auch Daten und Vorlagenattribute hinzufügen können, hat die übergeordnete Komponente ebenfalls Vorrang. Ab diesem Punkt können Sie auch die Absicht (Erweiterung) des Herstellers erkennen.

Objekte im Schlüsselwertformat wie Daten, Methoden, innere Funktionen, Komponenten und Anweisungen basieren alle auf der übergeordneten Komponente/Instanz

extends

Aufrufmethode: erweitert: CompA

ist ebenfalls eine Erweiterung der übergeordneten Komponente, ähnlich wie Mixins, hat jedoch eine niedrigere Priorität als die übergeordnete Komponente

extend

Konstruktor der erweiterten Komponente

Wird automatisch aufgerufen, wenn wir vue.component('a', {...}) aufrufen

Beachten Sie, dass es sich bei den Daten in der Erweiterung um eine Funktion handelt.

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Tabellensortierung in Angular

So implementieren Sie die Validierung in Angular

Informationen zum Kombinieren von Objektwerten in JavaScript

Informationen zur Verwendung von JavaScript-Pseudo-Arrays (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung von Mixins und Extends in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!