À quoi sert vuejs prop

Utilisation de vuejs prop : 1. Utilisez Prop pour transmettre des données, avec des instructions telles que "<child message="hello!"></child>" 2. Utilisez v-bind pour lier dynamiquement la valeur de des accessoires aux données du composant parent, etc.

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

Utilisation de base de Vuejs Prop

1. Utilisez Prop pour transférer 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" avec l'option props

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

puis lui transmettre une chaîne normale :

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

Le résultat :

hello!

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) :

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

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

Encore une fois, si vous utilisez des modèles de chaîne, ne vous inquiétez pas de ces restrictions.

3. Dynamic Prop

Semblable à l'utilisation de v-bind pour lier des fonctionnalités HTML à une expression, vous pouvez également utiliser v-bind pour lier 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.

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

L'utilisation de la syntaxe abrégée de v-bind est généralement plus simple :

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

4. Syntaxe littérale vs syntaxe dynamique

Parce qu'il s'agit d'un accessoire littéral, sa valeur est transmise sous forme de chaîne "1" plutôt que sous forme de nombre réel. Descendre. 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 :

5 Flux de données à élément unique

prop est une liaison à élément unique : lorsque les propriétés de. le composant parent change sera transmis au sous-composant, 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 comme valeur initiale, et le sous-composant utilise simplement sa valeur initiale comme valeur initiale des données locales

2.prop est utilisé comme original ; valeur qui doit être transformée La valeur est transmise.

Plus précisément, ces deux situations sont :

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. Vérification des accessoires

Les composants peuvent spécifier des 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 :

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 peut être les constructeurs natifs suivants :

* String

* Number

* Boolean

* Function

* Object

* Array

type peut également être un constructeur personnalisé, détecté à l'aide de instanceof. Lorsque la validation des accessoires échoue, un avertissement sera émis si vous utilisez la version de développement.

Recommandé : "La dernière sélection de 5 tutoriels vidéo 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!