Detaillierte Erklärung der gemischten Vererbung in Vue

Die Auswirkungen der gemischten Vererbung:

A hat ein Datenattribut und eine Say-Methode

B hat eine See-Methode und ein Name-Attribut

Nachdem A von B geerbt hat, besitzt A neben seinem eigenen Datenattribut und einer Say-Methode auch die See-Methode und ein Name-Attribut von B.

Nach dem Mischen von AB in C hat C seinen eigenen Inhalt und ein Datenattribut und eine Say-Methode von A sowie eine See-Methode und ein Name-Attribut von B.

1. Vererbung

Vue.extend-Methode

Vue.extend(Vue ComponentOptions) ist eine globale Methode, die den Basiskonstruktor von Vue verwendet, um eine „Unterklasse“ zu erstellen. Das Argument ist ein Objekt, das Komponentenoptionen enthält (Vue ComponentOptions).​

Das Datenattribut ist ein Sonderfall und muss beachtet werden - es muss eine Funktion (Factory-Funktion) in Vue.extend() sein.

// Erstelle einen Konstruktor ja
var Profil = Vue.extend({
  Vorlage: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  Daten: Funktion () {
    zurückkehren {
      Vorname: 'Walter',
      Nachname: 'Weiß',
      Alias: „Heisenberg“
    }
  }
})
// Erstellen Sie eine Instanz der Profile-Klasse und hängen Sie sie an ein Element an.
neues Profil().$mount('#Einhängepunkt')

erweitert Eigentum

extends ermöglicht das Deklarieren von Erweiterungen einer anderen Komponente (kann ein einfaches Optionsobjekt oder ein Konstruktor sein), ohne Vue.extend zu verwenden. Dies dient hauptsächlich dazu, die Erweiterung von Einzeldateikomponenten zu erleichtern. Sein Typ ist Objekt oder Funktion​

Datei pageTwo.vue

<Vorlage>
    <div>
        <h3>Seite Zwei</h3>
        <paging :total="gesamt" :pageSize="Seitengröße" :sizeOptions="sizeOptions"/>
    </div>
</Vorlage>
<Skript>
    PagingData aus „../component/PagingData.vue“ importieren
    Standard exportieren {
        // Vererbung implementieren extends: PagingData
    }
</Skript>

Hinweis: Die Paging-Funktion in der obigen Datei ist eine global registrierte benutzerdefinierte Komponente. PagingData ist ebenfalls eine Komponente, aber nicht registriert. Stattdessen wird ihr Inhalt durch Vererbung in pageTwo integriert.

2. Mixins

Ein Mixin-Objekt kann beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein Mixin verwendet, werden alle Optionen des Mixins in die eigenen Optionen der Komponente „gemischt“.

Zusammenführungsregeln

Wenn eine Komponente und ein Mixin Optionen mit demselben Namen haben, werden diese Optionen auf entsprechende Weise „zusammengeführt“.

1. Datenobjekte werden intern rekursiv zusammengeführt, und bei Konflikten haben Komponentendaten Vorrang.

2. Hook-Funktionen (Lebenszyklusfunktionen) mit gleichem Namen werden in einem Array zusammengeführt, sodass sie alle aufgerufen werden. Außerdem werden die Hooks des Mixins vor den eigenen Hooks der Komponente aufgerufen.

3. Optionen, deren Werte Objekte sind, wie Methoden, Komponenten und Anweisungen, werden zum selben Objekt zusammengeführt. Wenn die Schlüsselnamen zweier Objekte in Konflikt stehen, wird das Schlüssel-Wert-Paar des Komponentenobjekts verwendet.

Vererbung (Erweiterung) ist auch die Regel dieser Zusammenführung.

Sie können Mixins verwenden, um Mehrfachvererbung zu implementieren. Mixins werden nicht verwendet, um Vererbung zu implementieren. Führen Sie mehrere Vue ComponentOptions (optionale Vue-Komponentenobjekte) zusammen.

Format : Mixins: [Komponente 1 zusammenführen, Komponente 2 zusammenführen, …]

Datei pageOne.vue

<Vorlage>
    <div>
        <h3>Seite Eins</h3>
        <hr/>
        <paging @pageChangeEvt="cb" :total="gesamt" :pageSize="Seitengröße" :sizeOptions="sizeOptions"/>
    </div>
</Vorlage>
<Skript>
    PagingData aus „../component/PagingData.vue“ importieren
    importiere PagingFunc aus '../component/PagingFunc'
    Standard exportieren {
        // erweitert: {PagingFunc, PagingData},
        // erweitert: [PagingFunc, PagingData],
        Mixins: [PagingFunc, PagingData],
    }
</Skript>

Hinweis: Paging in der obigen Datei ist eine global registrierte benutzerdefinierte Komponente. PagingData und PagingFunc sind ebenfalls Komponenten, aber sie sind nicht registriert. Stattdessen werden ihre Inhalte durch Mischen in pageOne zusammengeführt.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!