Dans les chapitres précédents, vous avez appris à utiliser les props pour passer des données vers un composant. Cependant, cela n'était qu'une utilisation basique des props. Que se passerait-il si nous voulions être plus explicites sur le type de données qui doivent être passées ? Et si nous voulions nous assurer que la prop est passée en continu pour que notre composant bénéficie des propriétés dont il a besoin ? Jetons un œil à tout ça. 👀
Définissez des props en tant qu'objets
Définir les props comme un simple tableau de chaînes de caractères a l'avantage d'être facile à lire et à comprendre. Mais ça manque justement de complexité. Or, nous avons besoin de complexité pour nous assurer que nos props fonctionnent comme nous le souhaitons, peu importe qui utilise la prop.
Par exemple, dans le code ci-dessous, vous remarquerez que le composant prend trois props différentes :
list ;
title ;
count.
<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item"> {{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['list', 'title', 'count']
}
</script>Cependant, ces props ont des exigences spécifiques, ce qui pose problème. Par exemple, title devrait être une string mais list devrait posséder un comportement itératif, comme un array ou un object. Plutôt que d'espérer que ce soient bien les bonnes données qui sont passées, en croisant les doigts, ce serait quand même bien mieux de pouvoir empêcher le mauvais type de données de passer. Eh bien, c'est possible en définissant les props à l'aide d'un objet au lieu d'un tableau de chaînes de caractères.
<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {},
title: {},
count: {}
}
}
</script>Ici, la valeur de props est un objet. Les propriétés de cet objet correspondent à chacune des props que vous souhaitez utiliser. Pour cela, à chaque fois, une clé correspondant au nom de la prop (par exemple, list ) à laquelle est associée un objet servira à définir la configuration de l'objet.
Comme je vous l'ai dit, nous voulons éviter de recevoir le mauvais type de données dans chaque prop. Il faut donc commencer par configurer le type de prop attendu avec la clé type qui prend comme valeur un type de données JavaScript.
<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array
},
title: {
type: String
},
count: {
type: Number
}
}
}
</script>Par ailleurs, si notre composant a besoin de certaines props pour fonctionner ou avoir l'apparence souhaitée, ce serait génial de pouvoir le configurer. Vous vous en doutez, si je vous dis ça, c'est que Vue rend cela possible. 😏Il suffit d'ajouter la clé required qui prend un booléen en valeur dans notre objet de configuration.
<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array
},
title: {
type: String,
required: true
},
count: {
type: Number
}
}
}
</script>Cet objet nous permet même de définir une valeur par défaut sur les propriétés afin de fournir un contenu par défaut, dans le cas où la prop n'est jamais définie. Pour cela, il vous suffit de préciser la clé default et de lui associer la valeur souhaitée selon vos besoins. Dans notre exemple, cela pourrait ressembler à ce qui suit :
<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
},
title: {
type: String,
required: true
},
count: {
type: Number,
default: 1
}
}
}
</script>Entraînez-vous
Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier cafe-with-a-view. Pour commencer, consultez la branche P3C2-Begin.
Instructions
Utilisez la syntaxe en objet pour définir les propriétés associées à props dans MenuItem.vue.
En résumé
Dans ce chapitre, vous avez acquis les connaissances pour :
définir des props à l'aide d'un objet ;
définir des types de prop pour minimiser les bugs potentiels ;
utiliser la prop
required;définir une valeur par défaut sur une prop.
Cependant, bien que les props soient parfaites pour passer des informations du composant parent à l'enfant, elles ne fonctionnent pas dans l'autre sens. En d'autres termes, comment communiquer l'information du composant enfant au composant parent ? Nous allons étudier une façon de réaliser cette opération dans le prochain chapitre !
