Que signifie prop dans vuejs

Dans vuejs, prop est un attribut personnalisé utilisé par le composant parent pour transmettre des données. Les sous-composants doivent déclarer explicitement "prop" avec l'option props ; lors de l'utilisation de modèles sans chaîne, la forme du nom de la prop sera convertie de camelCase en kebab-case (séparé par des tirets).

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

1. Utilisez Prop pour transmettre des données

La portée des instances de composants est isolée. Cela signifie que les données du composant parent ne peuvent pas et ne doivent pas être référencées directement dans le modèle du composant enfant. Vous pouvez utiliser des accessoires pour transmettre des données aux composants enfants.
prop est une propriété personnalisée utilisée par le composant parent pour transmettre des données. Le sous-composant doit déclarer explicitement "prop" en utilisant l'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

puis lui transmettre une chaîne normale :

rrreeeLe résultat : rrreee

2. camelCase vs.kebab-case🎜🎜🎜html n'est pas sensible à la casse. Lorsque vous utilisez des modèles sans chaîne, le format du nom de l'accessoire sera converti de camelCase en kebab-case (séparé par des tirets) : 🎜rrreeerrreee🎜Encore une fois, si vous utilisez des modèles de chaîne, ne vous inquiétez pas de ces restrictions. 🎜

🎜Trois accessoires dynamiques🎜🎜🎜Similaire à l'utilisation de v-bind pour lier des fonctionnalités HTML à une expression, vous pouvez également utiliser v-bind Liez dynamiquement la valeur des accessoires aux données du composant parent. Chaque fois que les données du composant parent changent, la modification est également propagée au composant enfant. 🎜rrreee🎜L'utilisation de la syntaxe abrégée de v-bind est généralement plus simple : 🎜rrreee

🎜4. est un prop littéral dont la valeur est transmise sous forme de chaîne "1" plutôt que sous forme de nombre réel. Si vous souhaitez transmettre un numéro JavaScript réel, vous devez utiliser v-bind pour que sa valeur soit évaluée comme une expression JavaScript : 🎜🎜

🎜五, Flux de données à élément unique🎜🎜🎜prop est une liaison à élément unique : lorsque les propriétés du composant parent changent, elles seront transmises au composant enfant, mais pas l'inverse. Cela permet d'éviter que les composants enfants ne modifient par inadvertance l'état du composant parent, ce qui rendrait le flux de données de l'application difficile à comprendre. En même temps, cela est également facile à comprendre. Le composant parent est une abstraction de haut niveau du sous-composant, représentant les parties communes du sous-composant. Les modifications apportées aux données d'un composant ne modifieront pas son abstraction. mais les changements dans son abstraction représentent des changements dans tous les sous-composants. 🎜 De plus, chaque fois que le groupe est progressivement mis à jour, tous les accessoires des composants enfants seront mis à jour avec les dernières valeurs. Cela signifie que vous ne devez pas modifier les accessoires à l'intérieur des composants enfants. Si vous faites cela, Vue donnera un avertissement dans la console. 🎜 Il existe généralement deux cas de changement de prop : 🎜

1.prop est transmis in comme valeur initiale, le sous-composant Le composant utilise alors simplement sa valeur initiale comme valeur initiale des données locales ;

2. prop est transmis comme valeur d'origine qui doit être convertie.

🎜Plus précisément, ces deux situations sont : 🎜 a. Définir un attribut de données locales et utiliser la valeur initiale de prop comme valeur initiale des données locales. 🎜🎜rrreeerrreee

6. Vérification des accessoires🎜🎜Le composant peut spécifier les exigences de vérification pour les accessoires. Vue émettra un avertissement si les exigences de validation ne sont pas spécifiées. Ceci est utile lorsque le composant est mis à la disposition de tiers. 🎜 Lorsque prop est un objet plutôt qu'un tableau de chaînes, il contient des exigences de validation : 🎜rrreee🎜type peut être le constructeur natif suivant : 🎜🎜* String 🎜🎜* Number 🎜🎜* Boolean 🎜🎜 * Fonction 🎜🎜* Objet 🎜🎜* Array🎜🎜type peut également être un constructeur personnalisé, utilisez instanceof pour détecter. Lorsque la validation des accessoires échoue, un avertissement sera émis si vous utilisez la version de développement. 🎜🎜Recommandations associées : "🎜Tutoriel vue.js🎜"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!