Chargement...
Props
Les Props dans Vue.js sont un mécanisme fondamental pour transmettre des données d'un composant parent à un composant enfant, permettant la création de composants modulaires et réutilisables. Les Props facilitent le flux de données unidirectionnel, améliorent la maintenabilité et favorisent une architecture basée sur les composants. Elles sont essentielles dans le développement avancé de Vue.js car elles permettent aux composants enfants de réagir dynamiquement aux changements de l'état du parent tout en conservant l'encapsulation.
Exemple de Base
text
TEXT Code
// Exemple de base des Props dans Vue.js <template>
<div>
<h1>Composant Parent</h1>
<ChildComponent :titre="titreParent" :compteur="compteurParent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'ParentComponent',
components: { ChildComponent },
data() {
return {
titreParent: 'Exemple de Props Vue.js',
compteurParent: 10
}
}
}
</script>
// ChildComponent.vue <template>
<div>
<h2>{{ titre }}</h2>
<p>Compteur: {{ compteur }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
titre: {
type: String,
required: true
},
compteur: {
type: Number,
default: 0
}
}
}
</script>Exemple Pratique
text
TEXT Code
// Exemple avancé des Props dans Vue.js <template>
<div>
<h1>Composant Enfant Avancé</h1>
<p>Article: {{ article.nom }}</p>
<p>Quantité: {{ quantite }}</p>
<p>Prix Total: {{ prixTotal }}</p>
<button @click="augmenterQuantite">Augmenter Quantité</button>
</div>
</template>
<script>
export default {
name: 'EnfantAvance',
props: {
article: {
type: Object,
required: true,
validator: (obj) => 'nom' in obj && 'prix' in obj
},
quantite: {
type: Number,
default: 1
}
},
computed: {
prixTotal() {
return this.article.prix * this.quantite
}
},
methods: {
augmenterQuantite() {
this.$emit('update:quantite', this.quantite + 1)
}
}
}
</script>
// Utilisation dans le composant parent
<EnfantAvance :article="{ nom: 'Ordinateur', prix: 1200 }" :quantite="2" @update:quantite="newQty => quantite = newQty" />📊 Tableau de Référence
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| props | Définit des attributs personnalisés pour les composants enfants | props: { titre: String, compteur: Number } |
| :prop | Lier les données du parent aux Props de l'enfant | <ChildComponent :titre="titreParent" /> |
| valeurs par défaut | Fournir une valeur de secours | props: { quantite: { type: Number, default: 1 } } |
| propriétés calculées avec props | Dériver des données réactives à partir des Props | computed: { total: () => this.prix * this.quantite } |
| validator personnalisé | Valider la structure ou le contenu d'un objet | props: { article: { validator: obj => 'nom' in obj } } |
🧠 Testez Vos Connaissances
Prêt à Commencer
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
4
Questions
70%
Pour Réussir
∞
Temps
∞
Tentatives
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut