Wozu dient vuejs prop?

Verwendung von vuejs prop: 1. Verwenden Sie Prop, um Daten zu übergeben, mit Anweisungen wie „5dd6a6016ce03523c416f680867a38747d4dd9c7239aac360e401efe89cbb393“; 2. Verwenden Sie v-bind, um den Wert von dynamisch zu binden Requisiten an die übergeordneten Komponentendaten und so weiter.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Grundlegende Verwendung von Vuejs Prop

1. Verwenden Sie Prop zum Übertragen von Daten

Der Umfang der Komponenteninstanzen ist isoliert. Dies bedeutet, dass die Daten der übergeordneten Komponente nicht direkt in der Vorlage der untergeordneten Komponente referenziert werden können und sollten. Sie können Requisiten verwenden, um Daten an untergeordnete Komponenten zu übergeben.

prop ist eine benutzerdefinierte Eigenschaft, die von der übergeordneten Komponente zum Übergeben von Daten verwendet wird. Die Unterkomponente muss „prop“ explizit mit der Option props

Vue.component('child',{
    props:['message'],
    template:&#39;<span>{{ message }}</span>&#39;
})

deklarieren und ihr dann eine normale Zeichenfolge übergeben:

<child message="hello!"></child>

Das Ergebnis:

hello!

2. Bei camelCase vs.kebab-case

html wird die Groß-/Kleinschreibung nicht beachtet. Wenn Sie Nicht-String-Vorlagen verwenden, wird das Format des Requisitennamens von „camelCase“ in „kebab-case“ (getrennt durch Bindestriche) konvertiert:

//camelCase
Vue.component('child',{
    props:['myMessage'],
    template:&#39;<span>{{ message }}</span>&#39;
})

//kebab-case
<child my-message="hello!"></child>

Auch wenn Sie String-Vorlagen verwenden, müssen Sie sich über diese Einschränkungen keine Sorgen machen.

3. Dynamische Requisite

Ähnlich wie mit v-bind HTML-Features an einen Ausdruck gebunden werden, können Sie mit v-bind auch den Wert von Props dynamisch an die Daten der übergeordneten Komponente binden. Wenn sich die Daten der übergeordneten Komponente ändern, wird die Änderung auch an die untergeordnete Komponente weitergegeben.

<div>
    <input v-model="parrentMsg">
    <br>
    <child v-bind:my-message="parrentMsg"></child>
</div>

Die Verwendung der abgekürzten Syntax von v-bind ist normalerweise einfacher:

<child :my-message="parrentMsg"></child>

4. Literale Syntax vs. dynamische Syntax

Da es sich um eine literale Requisite handelt, wird ihr Wert als Zeichenfolge „1“ und nicht als tatsächliche Zahl übergeben Gehen. Wenn Sie eine tatsächliche JavaScript-Zahl übergeben möchten, müssen Sie v-bind verwenden, damit sein Wert als JavaScript-Ausdruck ausgewertet wird:

5 Einzelelement-Datenfluss

prop ist eine Einzelelement-Bindung: wenn die Eigenschaften von Die Änderung der übergeordneten Komponente wird an die Unterkomponente weitergegeben, nicht jedoch umgekehrt. Dadurch soll verhindert werden, dass untergeordnete Komponenten versehentlich den Status der übergeordneten Komponente ändern – was den Datenfluss der Anwendung schwer verständlich machen würde. Gleichzeitig ist dies auch leicht zu verstehen. Die übergeordnete Komponente ist eine Abstraktion der Unterkomponente auf hoher Ebene, die die gemeinsamen Teile der Unterkomponente darstellt. aber Änderungen in seiner Abstraktion repräsentieren Änderungen in allen Unterkomponenten.

Darüber hinaus werden bei jeder schrittweisen Aktualisierung der Gruppe alle Requisiten der untergeordneten Komponenten auf die neuesten Werte aktualisiert. Dies bedeutet, dass Sie Requisiten innerhalb untergeordneter Komponenten nicht ändern sollten. Wenn Sie dies tun, gibt Vue eine Warnung in der Konsole aus.

Normalerweise gibt es zwei Fälle, in denen Props geändert werden:

1.prop wird als Anfangswert übergeben, und die Unterkomponente verwendet einfach ihren Anfangswert als Anfangswert der lokalen Daten;

2.prop wird als Original verwendet Wert, der transformiert werden muss. Der Wert wird übergeben.

Genauer gesagt sind diese beiden Situationen:

a.定义一个局部data属性，并将prop的初始值作为局部数据的初始值。
“`
props: [‘initialCounter’],
data: function () {
return { counter: this.initialCounter}
}
    b.定义一个 computed 属性，此属性从 prop 的值计算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

6. Requisitenüberprüfung

Komponenten können Überprüfungsanforderungen für Requisiten festlegen. Vue gibt eine Warnung aus, wenn keine Validierungsanforderungen angegeben sind. Dies ist nützlich, wenn die Komponente anderen zur Verfügung gestellt wird. Wenn

prop ein Objekt und kein Array von Zeichenfolgen ist, enthält es Validierungsanforderungen:

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    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 value > 10
      }
    }
  }
})

type kann die folgenden nativen Konstruktoren sein:

* String

* Number

* Boolean

* Function

* Object

* Array

type kann auch ein benutzerdefinierter Konstruktor sein, der mithilfe von „instanceof“ erkannt wird. Wenn die Requisitenvalidierung fehlschlägt, wird eine Warnung ausgegeben, wenn Sie die Entwicklungsversion verwenden.

Empfohlen: „Die neueste Auswahl von 5 vue.js-Video-Tutorials“

Das obige ist der detaillierte Inhalt vonWozu dient vuejs prop?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!