Vue überschreibt die Methode der übergeordneten Klasse

Bei der Entwicklung von Vue kommt häufig die Verwendung der Komponentenvererbung zum Einsatz. Die Methoden übergeordneter Komponenten werden normalerweise von untergeordneten Komponenten geerbt und aufgerufen. In einigen Fällen müssen wir jedoch die Methoden übergeordneter Komponenten überschreiben, um bestimmte Anforderungen zu erfüllen. In diesem Artikel wird erläutert, wie übergeordnete Komponenten in Vue überschrieben werden.

Warum müssen Sie die Methoden der übergeordneten Komponente überschreiben?

Normalerweise werden die Methoden der übergeordneten Komponente von mehreren untergeordneten Komponenten gemeinsam genutzt. In einigen Fällen müssen einige Unterkomponenten entsprechend ihren eigenen Bedingungen entsprechende Änderungen an den Methoden der übergeordneten Komponente vornehmen. In diesem Fall ist es erforderlich, die Methoden der übergeordneten Komponente zu überschreiben. Wenn wir beispielsweise die von der übergeordneten Komponente übergebenen Parameter ändern oder bestimmte Vorgänge der übergeordneten Komponente abfangen müssen, ist es erforderlich, die Methode der übergeordneten Komponente zu überschreiben.

So überschreiben Sie die Methode der übergeordneten Komponente

In Vue gibt es hauptsächlich zwei Möglichkeiten, die Methode der übergeordneten Komponente zu überschreiben: Verwenden Sie v-bind, um Parameter zu binden oder Verwenden Sie Vue. Die Erweiterungsmethode erstellt Unterklassenkomponenten. Im Folgenden stellen wir diese beiden Methoden vor.

Verwenden Sie V-Bind, um Parameter zu binden.

Wenn in Vue die übergeordnete Komponente Parameter an die untergeordnete Komponente übergibt, können Sie Daten über V-Bind binden. Wenn die untergeordnete Komponente während dieses Prozesses die von der übergeordneten Komponente übergebenen Parameter ändern möchte, muss sie lediglich eine Rückruffunktion über das props-Attribut übergeben und die Methode zum Überschreiben der übergeordneten Komponente in dieser Rückruffunktion implementieren.

Angenommen, wir haben eine Zählerkomponente als übergeordnete Komponente, die über eine Zähldaten- und eine Anzeigemethode verfügt:

<template>
  <div>
    <button @click="showCount">Show count</button>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        show() {
            alert(this.count)
        }
    }
  }
</script>

Jetzt möchten wir eine untergeordnete Komponente verwenden, um Schreiben Sie die Show-Methode so um, dass bei jedem Aufruf der Show-Methode zuerst „Before Show:“ und dann der Zählwert angezeigt wird. Zu diesem Zeitpunkt können wir v-bind verwenden, um eine neue Show-Methode in der untergeordneten Komponente zu binden:

<template>
  <div>
    <button @click="showCount">Show count</button>
  </div>
</template>

<script>
  export default {
    props: {
        show: Function
    },
    mounted() {
        this.show = () => {
            alert('Before show：' + this.count)
            this.$props.show()
        }
    }
  }
</script>

Auf diese Weise wird die untergeordnete Komponente übertragen, wenn wir die Show-Methode in der übergeordneten Komponente übergeben Diese Methode wurde neu geschrieben und die Funktionalität wurde geändert.

Verwenden Sie die Vue.extend-Methode, um eine Unterklassenkomponente zu erstellen.

Eine andere Möglichkeit, eine Methode zu implementieren, die eine übergeordnete Komponente überschreibt, besteht darin, die Vue.extend-Methode zum Erstellen einer Unterklasse zu verwenden Komponente. Diese Methode eignet sich für Szenarien, in denen mehrere Methoden der übergeordneten Komponente überschrieben werden müssen und die untergeordnete Komponente möglicherweise praktischer ist, wenn sie in mehreren übergeordneten Komponenten verwendet wird.

Mit der Vue.extend-Methode können wir einen neuen Komponentenkonstruktor basierend auf der übergeordneten Komponente erstellen und die übergeordnete Komponente neu schreiben, indem wir die Daten, Methoden und anderen Attribute des neuen Komponentenkonstruktors definieren. Beispielsweise können wir die Show-Methode der Counter-Komponente wie folgt umschreiben:

import Vue from 'vue'

const Child = Vue.extend({
    data() {
        return {}
    },
    methods: {
        show() {
            alert('Before show：' + this.count)
            this.$super.show()
        }
    }
})

export default {
    components: {
        Child
    },
    data() {
        return {
            Count: Child
        }
    },
    methods: {
        show() {
            alert(this.count)
        }
    }
}

In diesem Code erstellen wir über die Vue.extend-Methode einen Konstruktor namens Child und definieren ihn in der Child-Komponente The show Die Methode ruft über this.$super die Show-Methode der übergeordneten Komponente auf. Dann verwenden wir in der Counter-Komponente die Child-Komponente als Konstruktor der Counter-Komponente. Wenn die Show-Methode aufgerufen wird, wird die Show-Methode in der Child-Komponente ausgelöst.

Zusammenfassung

Die oben genannten Methoden sind zwei Methoden zum Umschreiben übergeordneter Komponentenmethoden in Vue. Für jede Methode müssen Sie je nach Situation auswählen, welche Methode verwendet werden soll . erreichen. Bei der Verwendung von Vue können wir zur besseren Wiederverwendung und Skalierbarkeit von Komponenten versuchen, die Komponentenvererbung zu verwenden.

Das obige ist der detaillierte Inhalt vonVue überschreibt die Methode der übergeordneten Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!