Vue.js-Komponenten

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

Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln.

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:

Die Syntax zum Registrieren einer globalen Komponente ist wie folgt:

Vue.component(tagName, options)

tagName ist der Komponentenname und options sind die Konfigurationsoptionen. Nach der Registrierung können wir die Komponente wie folgt aufrufen:

<tagName></tagName>

Globale Komponente

Alle Instanzen können globale Komponenten verwenden.

Beispiel für eine globale Komponente

Registrieren Sie eine einfache globale Komponente 'example' und verwenden Sie sie:

<div id="app"> <example></example> </div> <script>// Registrieren Vue.component('example', { template: '<h1>Benutzerdefinierte Komponente!</h1>' }) // Root-Instanz erstellen new Vue({ el: '#app' })</script>

Ausprobieren »

Lokale Komponente

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

Beispiel für lokale Komponente

Registrieren Sie eine einfache lokale Komponente 'example' und verwenden Sie sie:

<div id="app"> <example></example> </div> <script> var Child = { template: '<h1>Benutzerdefinierte Komponente!</h1>' } // Root-Instanz erstellen new Vue({ el: '#app', components: { //<example>ist nur in der übergeordneten Vorlage verfügbar 'example': Child } })</script>

Ausprobieren »

Prop

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

Die übergeordnete Komponente muss Daten über Props an die untergeordnete Komponente übergeben, und die untergeordnete Komponente muss "prop" mithilfe der props-Option explizit deklarieren:

Prop-Beispiel

<div id="app"> <child message="Hallo!"></child> </div> <script>// Registrieren Vue.component('child', { // Props deklarieren props: ['message'], // Es kann auch in der vm-Instanz wie "this.message" verwendet werden template: '<span>{{ message }}</span>' }) // Root-Instanz erstellen new Vue({ el: '#app' })</script>

Ausprobieren »

Dynamische Prop

Ähnlich wie bei der Verwendung von v-bind, um HTML-Attribute an einen Ausdruck zu binden, können Sie v-bind auch verwenden, um Prop-Werte dynamisch an Daten der Elternkomponente zu binden. Wann immer sich die Daten der Elternkomponente ändern, wird die Änderung auch an die Kindkomponente weitergegeben:

Prop-Beispiel

<div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script>// Registrieren Vue.component('child', { // Props deklarieren props: ['message'], // Es kann auch in der vm-Instanz wie "this.message" verwendet werden template: '<span>{{ message }}</span>' }) // Root-Instanz erstellen new Vue({ el: '#app', data: { parentMsg: 'Inhalt der Elternkomponente' } })</script>

Ausprobieren »

Im folgenden Beispiel wird die v-bind-Direktive verwendet, um das Todo an jede wiederholte Komponente zu übergeben:

Prop-Beispiel

<div id="app"> <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'Example' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>

Ausprobieren »

Hinweis: Prop ist eine Einweg-Bindung: Wenn sich die Eigenschaften der übergeordneten Komponente ändern, werden sie an die untergeordnete Komponente übergeben, aber nicht umgekehrt.

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, erkannt mit instanceof.

Andere Erweiterungen