Grundlagen der VUE3-Entwicklung: Verwendung von Erweiterungen zum Erben von Komponenten

Vue ist derzeit eines der beliebtesten Front-End-Frameworks, und VUE3 ist die neueste Version des Vue-Frameworks. Im Vergleich zu VUE2 bietet VUE3 eine höhere Leistung und ein besseres Entwicklungserlebnis und ist für viele Entwickler zur ersten Wahl geworden. In VUE3 ist die Verwendung von Erweiterungen zum Erben von Komponenten eine sehr praktische Entwicklungsmethode. In diesem Artikel wird erläutert, wie Erweiterungen zum Erben von Komponenten verwendet werden.

1. Was ist „Extends“?

Extens ist in Vue ein sehr praktisches Attribut. Es kann für untergeordnete Komponenten verwendet werden, um die Optionen von übergeordneten Komponenten zu erben. Beispielsweise wird eine Vorlage in der übergeordneten Komponente definiert und über das extensions-Attribut an die untergeordnete Komponente übergeben. Die Vorlage kann direkt in der Komponente verwendet werden, ohne diese neu zu definieren. Diese Vererbungsmethode kann die Wiederverwendung von Code realisieren, die Codemenge reduzieren und die Entwicklungseffizienz verbessern.

2. Wie verwende ich Erweiterungen?

Zuerst müssen wir eine übergeordnete Komponente definieren, eine Vorlage definieren und sie als separate Datei speichern, z. B. HelloWorld.vue:

<template>
  <div>
    <h1>Hello, {{name}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    name: {
      type: String,
      default: 'Vue3'
    },
    content: {
      type: String,
      default: 'Welcome to Vue3'
    }
  }
}
</script>

In der übergeordneten Komponente müssen wir diese Vorlage über die an die untergeordnete Komponente übergeben Erweitert das Attribut Component, speichert die definierte Vorlage als Mixins.js-Datei, zum Beispiel:

export default {
  extends: HelloWorld    //继承HelloWorld.vue
}

HelloWorld hier ist der Komponentenname, den wir in der übergeordneten Komponente definiert haben.

Als nächstes müssen wir Mixins.js in die untergeordnete Komponente einführen und Extends verwenden, um die Optionen der übergeordneten Komponente zu erben, und sie als separate Datei speichern, z. B. App.vue:

<template>
  <div>
    <HelloWorld />    //使用extends继承HelloWorld.vue的模板
    <p>{{message}}</p>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Mixins from './Mixins'

export default {
  mixins: [Mixins],    //引入Mixins.js
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'This is App.vue'
    }
  }
}
</script>

Verwenden Sie das Mixins-Attribut, um Mixins einzuführen. js und verwenden Sie diese Komponente in der Vorlage. Schließlich müssen wir die Unterkomponente App.vue in die Stammkomponente der Vue-Anwendung rendern, zum Beispiel:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3. Zusammenfassung

Die Verwendung von Erweiterungen zum Erben von Komponenten ist eine sehr praktische Entwicklungsmethode, die uns beim Erreichen von Code helfen kann Wiederverwendung. Verbesserung der Entwicklungseffizienz. In VUE3 ist die Verwendung des Attributs „extends“ sehr einfach. Sie müssen lediglich die Vorlage und die Vererbungsbeziehung in der übergeordneten Komponente und der untergeordneten Komponente definieren. Ich hoffe, dass dieser Artikel Entwicklern hilfreich sein und ihnen den Umgang mit der VUE3-Entwicklung erleichtern kann.

Das obige ist der detaillierte Inhalt vonGrundlagen der VUE3-Entwicklung: Verwendung von Erweiterungen zum Erben von Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!