Was bedeutet prop in vuejs

In vuejs ist prop ein benutzerdefiniertes Attribut, das von der übergeordneten Komponente zum Übergeben von Daten verwendet wird. Unterkomponenten müssen „prop“ explizit mit der Option „props“ deklarieren; bei Verwendung von Nicht-String-Vorlagen wird die Form des Requisitennamens von „camelCase“ in „kebab-case“ (durch Bindestriche getrennt) konvertiert.

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

1. Verwenden Sie Prop, um Daten zu übergeben

Der Bereich 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 props选项声明“prop”

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

然后向它传入一个普通字符串：

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

结果：

hello!

二、camelCase vs.kebab-case

html不区分大小写。当使用非字符串模板时，prop的名字形式会从camelCase转为kebab-case（短横线隔开）：

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

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

再次说明，如果你是用字符串模板，不用在意这些限制。

三、动态Prop

类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

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

使用v-bind的缩写语法通常更简单：

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

四、字面量语法vs动态语法

因为它是一个字面prop ，它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用 v-bind ，从而让它的值被当作 JavaScript 表达式计算：

五、单项数据流

prop是单项绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。同时，这也很好理解，父组件是子组件的高度抽象，表示子组件的共有部分，一个组件的数据改变并不会改变其抽象，然而其抽象的改变却代表着所有子组件的改变。
另外，每次组渐渐更新时，子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了，Vue会在控制台给出警告。
通常有两种改变prop的情况：

1.prop作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；

2.prop作为需要被转变的原始值传入。

更确切地说这两种情况是：
a.定义一个局部data属性，并将prop的初始值作为局部数据的初始值。

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

    b.定义一个 computed 属性，此属性从 prop 的值计算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

六、Prop验证

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。
prop 是一个对象而不是字符串数组时，它包含验证要求：

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可以是下面的原生构造器： 

* String 

* Number 

* Boolean 

* Function 

* Object 

* Array

type也可以是一个自定义构造器，使用instanceofrrreee

deklarieren und ihr dann eine normale Zeichenfolge übergeben:

rrreeeDas Ergebnis: rrreee

2. camelCase vs.kebab-case🎜🎜🎜html unterscheidet nicht zwischen Groß- und Kleinschreibung. Wenn Sie Nicht-String-Vorlagen verwenden, wird das Format des Requisitennamens von „camelCase“ in „kebab-case“ (getrennt durch Bindestriche) konvertiert: 🎜rrreeerrreee🎜Auch wenn Sie String-Vorlagen verwenden, müssen Sie sich über diese Einschränkungen keine Sorgen machen. 🎜

🎜Drei, dynamische Prop🎜🎜🎜Ähnlich wie v-bind zum Binden von HTML-Funktionen an einen Ausdruck verwenden, können Sie auch v-bind verwenden Binden Sie den Wert von Requisiten dynamisch an die Daten der übergeordneten Komponente. Wenn sich die Daten der übergeordneten Komponente ändern, wird die Änderung auch an die untergeordnete Komponente weitergegeben. 🎜rrreee🎜Die Verwendung der abgekürzten Syntax von v-bind ist normalerweise einfacher: 🎜rrreee

🎜4. Literale Syntax vs. dynamische Syntax🎜🎜🎜Because It ist ein Literal prop, dessen Wert als Zeichenfolge "1" und nicht als tatsächliche Zahl übergeben wird. Wenn Sie eine tatsächliche JavaScript-Zahl übergeben möchten, müssen Sie v-bind verwenden, damit sein Wert als JavaScript-Ausdruck ausgewertet wird: 🎜🎜

🎜五, Single-Item-Datenfluss🎜🎜🎜prop ist eine Single-Item-Bindung: Wenn sich die Eigenschaften der übergeordneten Komponente ändern, wird diese an die untergeordnete Komponente übertragen, aber nicht 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 prop geändert wird: 🎜

1.prop wird übergeben in als Anfangswert, die Unterkomponente Die Komponente verwendet dann einfach ihren Anfangswert als Anfangswert der lokalen Daten;

2. prop wird als ursprünglicher Wert übergeben, der konvertiert werden muss.

🎜Genauer gesagt sind diese beiden Situationen: 🎜 a. Definieren Sie ein lokales Datenattribut und verwenden Sie den Anfangswert von prop als Anfangswert der lokalen Daten. 🎜🎜rrreeerrreee

6. Requisitenüberprüfung🎜🎜Die Komponente kann Ü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: 🎜rrreee🎜type kann der folgende native Konstruktor sein: 🎜🎜* String 🎜🎜* Number 🎜🎜* Boolean 🎜🎜 * Funktion 🎜🎜* Objekt 🎜🎜* Array🎜🎜type kann auch ein benutzerdefinierter Konstruktor sein. Verwenden Sie zur Erkennung instanceof. Wenn die Requisitenvalidierung fehlschlägt, wird eine Warnung ausgegeben, wenn Sie die Entwicklungsversion verwenden. 🎜🎜Verwandte Empfehlungen: „🎜vue.js Tutorial🎜“🎜

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