So verwenden Sie Vue-Mixins und -Erweiterungen

Dieses Mal werde ich Ihnen zeigen, wie Sie Vue-Mixins und Extends verwenden. Was sind die Hinweise bei der Verwendung von Vue-Mixins und -Extends? Das Folgende ist ein praktischer Fall. Lasst uns gemeinsam einen Blick darauf werfen. Schaut mal rein.

Vue stellt Mixins bereit und erweitert Konfigurationselemente, was ich in letzter Zeit sehr nützlich fand.

Mixins und VererbungErweiterungen

Schauen Sie sich an, was in der offiziellen Dokumentation steht. Tatsächlich kann man beides als Vererbung verstehen, die Objekte empfängt und Arrays (kann als Mehrfachvererbung verstanden werden) und erweitert, als ob sie Objekte oder Funktionen empfängt (kann verstanden werden). als Einzelvererbung).

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: Die von Mixins und Extens geerbte übergeordnete Klasse wird zuerst aufgerufen. Die durch Extens ausgelöste Priorität ist höher als bei der Warteschlange

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

• Nach dem Test sind die Wertvererbungsregeln von watch dieselben.

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'
}

• Fazit: Wenn die Unterklasse erneut deklariert wird, werden die Variablen in den Daten neu geschrieben, unabhängig davon, um welche Unterklasse es sich handelt.

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

• Nach dem Test sind das -Attribut in Requisiten, Methoden in Methoden und die Vererbungsregeln für berechnete Werte gleich.

Im Folgenden werden Mixins, Extends und Extend

separat vorgestellt. Mixins

Aufrufmethode: Mixins: [mixin1, mixin2]

Es handelt sich um eine Erweiterung der übergeordneten Komponente, einschließlich Methoden, Komponenten, Anweisungen usw. . .

Wenn die Hook-Funktion ausgelöst wird, wird zuerst die Funktion der 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 auch Vorrang, wenn sie über dieses Attribut verfügt. Ab diesem Punkt können Sie auch die Absicht des Herstellers erkennen (Erweiterung).

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

verlängert sich

Aufrufmethode: erweitert: CompA

Es handelt sich ebenfalls um eine Erweiterung der übergeordneten Komponente, ähnlich wie bei Mixins, ihre Priorität ist jedoch niedriger als die der übergeordneten Komponente

verlängern

Konstruktor der Erweiterungskomponente

wird automatisch aufgerufen, wenn wir vue.component('a', {...}) aufrufen. Es ist erwähnenswert, dass die Daten in „extend“ eine Funktion sind.

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:

Ajax-Anfragemethode im Axios-Client

vue.js vue-router verbessert die Benutzererfahrung

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