Vue3 Komponenten

Jede Vue-Komponente ist eine unabhängige Vue-Instanz mit eigenem Template, eigenen Daten, Methoden und Lifecycle-Hooks, wodurch Komponenten ihre eigene Funktionalität und ihr eigenes Styling in sich geschlossen definieren und verwalten können.

Komponenten sind eine der leistungsstärksten Funktionen von Vue.js.

Komponenten können HTML-Elemente erweitern, wiederverwendbaren Code kapseln und dabei helfen, deine Benutzeroberfläche in unabhängige und wiederverwendbare Teile aufzuteilen.

Jede Vue-Komponente ist eine unabhängige Vue-Instanz mit eigenem Template, eigenen Daten, Methoden und Lifecycle-Hooks, wodurch Komponenten ihre eigene Funktionalität und ihr eigenes Styling in sich geschlossen definieren und verwalten können.

Merkmale und Vorteile von Vue-Komponenten

  • Wiederverwendbarkeit: Komponenten können an verschiedenen Stellen mehrfach verwendet werden, was die Wiederverwendbarkeit und Wartbarkeit des Codes verbessert.
  • Kapselung: Jede Komponente ist ein unabhängiger Gültigkeitsbereich, der ihren eigenen Zustand und ihre eigene Logik kapselt und globale Verschmutzung vermeidet.
  • Zusammensetzbarkeit: Komplexe Oberflächen können durch Kombination mehrerer kleiner Komponenten erstellt werden.
  • Reaktivität: Die Daten der Komponente sind reaktiv an die Ansicht gebunden, und die Ansicht aktualisiert sich automatisch, wenn sich die Daten ändern.
  • Modularität: Modulare Entwicklung wird unterstützt, und moderne Frontend-Toolchains können für den Aufbau und die Verwaltung verwendet werden.

Das Komponentensystem ermöglicht es uns, große Anwendungen mit unabhängigen, wiederverwendbaren kleinen Komponenten zu erstellen. Nahezu jede Art von Anwendungsoberfläche kann in einen Komponentenbaum abstrahiert werden:

Jede Vue-Anwendung wird mit der Funktion createApp erstellt. Die an createApp übergebenen Optionen werden verwendet, um die Root-Komponente zu konfigurieren. Wenn wir die Anwendung mounten, wird diese Komponente als Ausgangspunkt für das Rendering verwendet.

Eine Anwendung muss an ein DOM-Element gemountet werden.

Im folgenden Beispiel mounten wir die Vue-Anwendung an

, und #app sollte übergeben werden:

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

Die Syntax zum Registrieren einer globalen Komponente ist wie folgt:

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-nameist der Komponentenname,/* ... */Teil sind die Konfigurationsoptionen. Nach der Registrierung können wir die Komponente folgendermaßen aufrufen:

<my-component-name></my-component-name>

Ein einfaches Beispiel für eine Vue-Komponente:

Beispiel für eine globale Komponente

Registrieren Sie ein einfaches globales Komponentenbeispiel und verwenden Sie es:

<div id="app"> <example></example> </div> <script>// Eine Vue-Anwendung erstellen const app = Vue.createApp({}) // Eine neue globale Komponente namens example definieren app.component('example', { template: '<h1>Benutzerdefinierte Komponente!</h1>' }) app.mount('#app') </script>

Ausprobieren »

Als Nächstes registrieren wir eine button-counter-Komponente. Nach jedem Klick wird der Zähler um 1 erhöht:

Beispiel

// Eine Vue-Anwendung erstellen
const app = Vue.createApp({})

// Eine neue globale Komponente namens button-counter definieren
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
Geklickt{{ count }}mal!
    </button>`
})
app.mount('#app')
</script>

Ausprobieren »

Hinweis: Im Template ist`ein Backtick, kein einfaches Anführungszeichen.'。

Wiederverwendung von Komponenten

Du kannst eine Komponente beliebig oft wiederverwenden:

Beispiel

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

Ausprobieren »

Globale Komponenten

In den obigen Beispielen werden unsere Komponenten alle global mit der component-Methode registriert.

Global registrierte Komponenten können in den Templates von danach erstellten App-Instanzen verwendet werden, einschließlich der Templates aller untergeordneten Komponenten im Komponentenbaum der Root-Instanz.

Beispiel für eine globale Komponente

Registrieren Sie ein einfaches globales Komponentenbeispiel und verwenden Sie es:

<div id="app"> <example></example> </div> <script>// Eine Vue-Anwendung erstellen const app = Vue.createApp({}) // Eine neue globale Komponente namens example definieren app.component('example', { template: '<h1>Benutzerdefinierte Komponente!</h1>' }) app.mount('#app') </script>

Ausprobieren »

Lokale Komponenten

Die globale Registrierung ist oft nicht ideal. Wenn du beispielsweise ein Build-System wie webpack verwendest, bedeutet die globale Registrierung aller Komponenten, dass eine Komponente, selbst wenn du sie nicht mehr verwendest, trotzdem in dein endgültiges Build-Ergebnis aufgenommen wird. Dies führt zu einer unnötigen Erhöhung des von Nutzern heruntergeladenen JavaScript.

In diesen Fällen können Sie eine Komponente mit einem einfachen JavaScript-Objekt definieren:

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

Definieren Sie dann die Komponenten, die Sie verwenden möchten, in der components-Option:

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Für jede Eigenschaft im components-Objekt ist der Eigenschaftsname der Name des benutzerdefinierten Elements (component-a, component-b) und der Eigenschaftswert das Optionsobjekt der Komponente (ComponentA, ComponentB).

Wir können lokale Komponenten auch in der Instanzoption registrieren, sodass die Komponente nur in dieser Instanz verwendet werden kann:

Beispiel für lokale Komponente

Registrieren Sie eine einfache lokale Komponente exampleA und verwenden Sie sie:

<div id="app"> <example-a></example-a> </div> <script> var exampleA = { template: '<h1>Benutzerdefinierte Komponente!</h1>' } const app = Vue.createApp({ components: { 'example-a': exampleA } }) app.mount('#app') </script>

Ausprobieren »

Single-File-Komponenten (.vue-Dateien)

Die Verwendung von Single-File-Komponenten ermöglicht es Ihnen, Vue-Komponenten besser zu organisieren und zu verwalten. Eine Komponente besteht normalerweise aus drei Teilen: Template, Script und Style.

Beispiel

<!-- MyComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hallo von MyComponent',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
/* Private Stile der Komponente */
p {
  color: blue;
}
</style>

Prop

prop ist ein benutzerdefiniertes Attribut, das von untergeordneten Komponenten verwendet wird, um von übergeordneten Komponenten übergebene Daten zu empfangen.

Daten der übergeordneten Komponente müssen über Props an untergeordnete Komponenten übergeben werden, und untergeordnete Komponenten müssen "prop" explizit mit der props-Option deklarieren:

Prop-Beispiel

<div id="app"> <site-name title="Google"></site-name> <site-name title="Beispiel"></site-name> <site-name title="Taobao"></site-name> </div> <script> const app = Vue.createApp({}) app.component('site-name', { props: ['title'], template: `<h4>{{ title }}</h4>` }) app.mount('#app') </Skript>

Ausprobieren »

Eine Komponente kann standardmäßig beliebig viele Props haben, und jeder beliebige Wert kann an jede Prop übergeben werden.

Dynamische Props

Ähnlich wie beim Binden von HTML-Attributen an einen Ausdruck mit v-bind können Sie auch v-bind verwenden, um Prop-Werte dynamisch an die Daten der übergeordneten Komponente zu binden. Immer wenn sich die Daten der übergeordneten Komponente ändern, wird die Änderung auch an die untergeordnete Komponente weitergegeben:

Prop-Beispiel

<div id="app"> <site-info v-for="site in sites" :id="site.id" :title="site.title" ></site-info> </div> <script> const Site = { data() { return { sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'Example' }, { id: 3, title: 'Taobao' } ] } } } const app = Vue.createApp(Site) app.component('site-info', { props: ['id','title'], template: `<h4>{{ id }} - {{ title }}</h4>` }) app.mount('#app') </script>

Ausprobieren »

Prop-Validierung

Komponenten können Validierungsanforderungen für Props festlegen.

Um die Validierungsmethode für Props anzupassen, können Sie ein Objekt mit Validierungsanforderungen für die Werte in Props angeben, anstatt eines Arrays von Zeichenfolgen. Zum Beispiel:

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Wenn die Prop-Validierung fehlschlägt, erzeugt Vue (im Entwicklungs-Build) eine Konsolenwarnung.

type kann einer der folgenden nativen Konstruktoren sein:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

type kann auch ein benutzerdefinierter Konstruktor sein, der mit instanceof geprüft wird.

Andere Erweiterungen