Vue3 extends-Eigenschaft

Vue3 选项式 APIVue3 Options API

In Vue3,extendsDie Eigenschaft ist eine sehr nützliche Funktion, mit der du bestehende Komponenten erben und erweitern kannst.

Indem Sieextends, kannst du bestehende Komponentenlogik wiederverwenden und anpassen, ohne Code neu zu schreiben. Dies ist sehr hilfreich, um Code-Redundanz zu reduzieren und die Wartbarkeit des Codes zu verbessern.

Anwendungsfälle

extendsDie Eigenschaft wird typischerweise in den folgenden Szenarien verwendet:

  1. Komponentenlogik wiederverwenden: Wenn du eine Basiskomponente hast und andere Komponenten ihre Logik erben müssen.
  2. Komponentenverhalten anpassen: Wenn du bestimmte Verhaltensweisen basierend auf Vererbung anpassen oder überschreiben musst.
  3. Konfigurierbare Komponenten erstellen: Baue durch Vererbung und Erweiterung flexiblere und besser konfigurierbare Komponenten.

Grundlegende Syntax

Beispiel

import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  // Hier kannst du neue Optionen hinzufügen oder bestehende Optionen überschreiben
};

Im obigen Code verwenden wir dieextendsEigenschaft, um dieBaseComponentKomponente zu erben. Danach kannst du neue Optionen zu dieser Komponente hinzufügen oder überschreibenBaseComponentdie darin vorhandenen Optionen.

Beispiel

1. Basis-Komponente

Zuerst definieren wir eine Basis-KomponenteBaseComponent.vue：

Beispiel

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from BaseComponent!'
    };
  }
};
</script>

2. Erbende Komponente

Als Nächstes erstellen wir eine neue KomponenteExtendedComponent.vue, die erbt vonBaseComponent, und überschreibt diemessagedata:

Beispiel

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  data() {
    return {
      message: 'Hello from ExtendedComponent!'
    };
  }
};
</script>

In diesem Beispiel,ExtendedComponenterbtBaseComponentdie gesamte Logik von , aber überschreibt diemessagedata. Daher ist das endgültig gerenderte ErgebnisHello from ExtendedComponent!。

Hinweise

  1. Optionszusammenführung: Bei Verwendung derextendsEigenschaft führt Vue eine Optionszusammenführung durch. Fürdata、methodsund andere Optionen vom Objekttyp führt Vue eine flache Zusammenführung durch. Wenn eine Eigenschaft mit demselben Namen vorhanden ist, überschreibt die Eigenschaft der Kindkomponente die Eigenschaft der Elternkomponente.

  2. Lebenszyklus-Hooks: Wenn sowohl die Kindkomponente als auch die Elternkomponente denselben Lebenszyklus-Hook definieren, werden beide Hook-Funktionen aufgerufen, und die Hook-Funktion der Elternkomponente wird vor der Hook-Funktion der Kindkomponente ausgeführt.

  3. Template-Überschreibung：extendsDie Eigenschaft erbt nur den Logikteil; der Template-Teil wird nicht geerbt. Wenn Sie das Template erben müssen, können Sie die Verwendung vonslotsodermixins。

Vue3 选项式 APIVue3 Options API

Andere Erweiterungen