Stütze


Auf dieser Seite wird davon ausgegangen, dass Sie Komponentengrundlagen gelesen haben. Wenn Sie noch nicht viel über Komponenten wissen, empfehle ich Ihnen, es zuerst zu lesen.


Inhaltsverzeichnis



Prop Groß-/Kleinschreibung (camelCase vs. kebab-case)

Bei Attributnamen in HTML wird die Groß-/Kleinschreibung nicht beachtet, sodass Browser alle Großbuchstaben als Kleinbuchstaben interpretieren. Das bedeutet, dass, wenn Sie eine Vorlage im DOM verwenden, der Name der CamelCase-Requisite den entsprechenden Kebab-Case-Namen (durch Bindestriche getrennte Benennung) verwenden muss: 

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

Auch hier gilt: Wenn Sie Zeichenfolgenvorlagen verwenden, gilt diese Einschränkung existiert nicht.


Requisitentyp

Bis hier haben wir nur die String-Array-Form gesehen aufgeführt prop: 

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

Normalerweise möchten Sie jedoch, dass jede Prop einen bestimmten Werttyp hat. An dieser Stelle können Sie Requisiten in Objektform auflisten, wobei die Namen und Werte dieser Eigenschaften der jeweilige Name und Typ der Requisite sind: 

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

Dies stellt nicht nur Dokumentation für Ihre Komponenten bereit, sondern auch Dokumentation Wenn sie auf den falschen Typ stoßen, wird der Benutzer über die JavaScript-Konsole des Browsers dazu aufgefordert. Im Rest dieser Seite werden Sie Typprüfung und andere Requisitenvalidierung sehen.


Statisches oder dynamisches Prop übergeben

So wissen Sie bereits, dass Sie einen statischen Wert wie folgt an Prop übergeben können: 

<blog-post title="My journey with Vue"></blog-post>

Du weißt auch, dass Prop passen kannv-bind Dynamische Zuweisung, zum Beispiel: 

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

In den beiden obigen Beispielen sind die von uns übergebenen Werte vom Typ String, aber tatsächlich kann jeder Werttyp an eine Requisite übergeben werden.


Geben Sie eine Zahl ein

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>


Übergeben Sie einen booleschen Wert

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>


Übergeben Sie ein Array 

<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>


Ein Objekt übergeben

<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>


Alle Eigenschaften eines Objekts übergeben

Wenn Sie alle Eigenschaften eines Objekts als übergeben möchten prop übergeben wird, können Sie v-bind ohne Parameter verwenden (anstelle von v-bind:prop-name). Zum Beispiel für ein bestimmtes Objekt post: 

post: {
  id: 1,
  title: 'My Journey with Vue'
}

Die folgende Vorlage: 

<blog-post v-bind="post"></blog-post>

entspricht: 

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>


Einseitiger Datenfluss

alle Requisiten bilden eine unidirektionale Abwärtsbindung zwischen ihren übergeordneten und untergeordneten Requisiten: Aktualisierungen der übergeordneten Requisite fließen nach unten zur untergeordneten Komponente, aber nicht umgekehrt. Dadurch wird verhindert, dass die untergeordnete Komponente versehentlich den Status der übergeordneten Komponente ändert, was dazu führen kann, dass der Datenfluss Ihrer Anwendung schwer zu verstehen ist.

Darüber hinaus werden jedes Mal, wenn die übergeordnete Komponente aktualisiert wird, alle Requisiten in der untergeordneten Komponente auf die neuesten Werte aktualisiert. Das bedeutet, dass Sie Requisiten innerhalb einer untergeordneten Komponente nicht ändern sollten. Wenn Sie dies tun, gibt Vue eine Warnung in der Konsole des Browsers aus.

Es gibt zwei häufige Situationen, in denen Sie versuchen, eine Requisite zu ändern:

1. Diese Requisite wird verwendet, um einen Anfangswert zu übergeben, und diese Unterkomponente möchte ihn dann als lokalen Wert verwenden Zu verwendende Requisitendaten. In diesem Fall ist es besser, eine lokale Dateneigenschaft zu definieren und diese Requisite als Anfangswert zu verwenden: 

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

　2. Diese Requisite wird als primitiver Wert übergeben und eine Konvertierung ist erforderlich . In diesem Fall ist es am besten, den Wert dieser Requisite zu verwenden, um eine berechnete Eigenschaft zu definieren: 

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Beachten Sie, dass in JavaScript Objekte und Arrays als Referenz übergeben werden, also für ein Array Oder Objekttyp-Requisite: Das Ändern des Objekts oder Arrays selbst in der untergeordneten Komponente wirkt sich auf den Status der übergeordneten Komponente aus.


Prop-Validierung

Wir können Validierungsanforderungen für Komponenten-Requisiten festlegen, beispielsweise für die Ihnen bekannten Typen. Wenn eine Anforderung nicht erfüllt ist, warnt Vue Sie in der Browserkonsole. Dies ist besonders hilfreich, wenn Sie eine Komponente entwickeln, die von anderen verwendet werden soll.

Um die Validierung von Requisiten anzupassen, können Sie anstelle eines Arrays von Zeichenfolgen ein Objekt mit Validierungsanforderungen für den Wert in props bereitstellen. 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 Requisitenüberprüfung fehlschlägt, generiert Vue (Build-Version der Entwicklungsumgebung) eine Konsolenwarnung.

Beachten Sie, dass diese Requisiten überprüft werden , bevor eine Komponenteninstanz erstellt wird , sodass sich die Instanzeigenschaften (wie data, computed usw.) in < befinden 🎜> oder default In den Funktionen nicht verfügbar. validator

Typprüfung

Kann einer der folgenden nativen Konstruktoren sein: type

  • String

  • Number

  • Boolean

  • Array

  • Object

  • Date

  • Function

  • Symbol

Extra,

Es kann auch ein benutzerdefinierter Konstruktor sein und über type überprüft werden. Wenn Sie beispielsweise den folgenden vorgefertigten Konstruktor verwenden: instanceof

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

, können Sie Folgendes verwenden: 

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

, um zu überprüfen, ob der Wert der

-Requisite über author erstellt wurde. new Person


Nicht-Prop-Eigenschaften

Eine Nicht-Prop-Eigenschaft wird an eine Komponente übergeben , aber die Komponente verfügt nicht über die durch die entsprechende Requisite definierten Eigenschaften.

Da sich explizit definierte Requisiten zur Weitergabe von Informationen an eine Unterkomponente eignen, kann der Autor der Komponentenbibliothek jedoch nicht immer vorhersehen, wie die Komponente verwendet wird. Aus diesem Grund können Komponenten beliebige Attribute akzeptieren und diese Attribute werden dem Stammelement der Komponente hinzugefügt.

Stellen Sie sich zum Beispiel vor, Sie verwenden eine

-Komponente eines Drittanbieters über ein Bootstrap-Plugin, für dessen <bootstrap-date-input> ein <input>-Attribut erforderlich ist. Wir können dieses Attribut zu Ihrer Komponenteninstanz hinzufügen: data-date-picker

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

Dann wird das

-Attribut automatisch zum Stammelement von data-date-picker="activated" hinzugefügt. <bootstrap-date-input>


Bestehende Funktionen ersetzen/zusammenführen

Stellen Sie sich vor, die

-Vorlage sieht so aus:<bootstrap-date-input>

<input type="date" class="form-control">

Um ein Theme für unser Datumsauswahl-Plugin anzupassen, müssen wir möglicherweise einen speziellen Klassennamen wie diesen hinzufügen: 

<bootstrap-date-input
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

In diesem Fall definieren wir zwei verschiedene class Der Wert:

  • form-control, der in der Vorlage der Komponente festgelegt wird

  • date-picker-theme-dark, der von der Komponente festgelegt wird

Von der übergeordneten Komponente übergeben. Bei den meisten Funktionen ersetzt der von außen bereitgestellte Wert den intern in der Komponente festgelegten Wert. Wenn Sie also type="text" eingeben, wird type="date" ersetzt und zerstört! Glücklicherweise sind die Eigenschaften class und style etwas intelligenter, was bedeutet, dass die Werte auf beiden Seiten kombiniert werden, um den Endwert zu erhalten: form-control date-picker-theme-dark.


Eigenschaftsvererbung deaktivieren

Wenn Sie das Stammelement nicht möchten Für die geerbten Eigenschaften der Komponente können Sie inheritAttrs: false in den Optionen der Komponente festlegen. Zum Beispiel: 

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

Dies ist besonders nützlich mit dem $attrs-Attribut der Instanz, das den Attributnamen und den Attributwert enthält, der an eine Komponente übergeben wird, zum Beispiel: 

{
  required: true,
  placeholder: 'Enter your username'
}

Mit inheritAttrs: false und $attrs, Sie können manuell entscheiden, welchem ​​Element diese Eigenschaften zugewiesen werden. Es wird häufig beim Schreiben von Grundkomponenten verwendet: 

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

Hinweis: inheritAttrs: false Option hat keinen Einfluss auf style und class der Bindung.

In diesem Modus können Sie Basiskomponenten eher wie rohe HTML-Elemente verwenden, ohne sich Gedanken darüber machen zu müssen, welches Element das eigentliche Stammelement ist: 

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>