Components sont un concept crucial dans Vue.js qui vous permet de créer des applications Web structurées et maintenables. Avec components, vous pouvez décomposer votre application en petites parties autonomes, chacune responsable d'une partie spécifique de l'interface utilisateur.
Dans cet article, nous allons explorer comment créer components dans Vue.js, les utiliser pour réutiliser le code et transmettre des données entre components. Nous approfondirons l'utilisation props pour transmettre des données d'un composant parent à un composant enfant, et l'utilisation d'événements pour transmettre des données d'un composant enfant à son composant parent.
1. Créer Components
Components dans Vue.js peut être créé à l'aide de la méthode `Vue.component` ou en définissant un seul fichier components.
Exemple:
// Global Component using Vue.component
Vue.component('my-component', {
// Component options
});
// Local Component using single-file component
// MyComponent.vue
<template>
<!-- Component template -->
</template>
<script>
export default {
// Component options
};
</script>
2. Structure des composants
Un composant Vue se compose d'un modèle, d'un script et de styles facultatifs. Le modèle contient le balisage HTML, le script contient les options du composant(données, méthodes, propriétés calculées, crochets de cycle de vie) et les styles définissent l'apparence du composant.
Exemple:
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
<style scoped>
/* Component styles */
</style>
3. Réutilisabilité des composants
Components dans Vue.js peut être réutilisé dans votre application, réduisant la duplication de code et améliorant la maintenabilité. Ils favorisent une approche modulaire, vous permettant de composer components des plus petits en plus grands.
Exemple:
// ParentComponent.vue
<template>
<div>
<child-component></child-component>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
4. Props
Props vous permet de transmettre des données du parent components à l'enfant components. Props sont déclarées dans le composant enfant et peuvent être utilisées comme des propriétés de données normales.
Exemple:
// ParentComponent.vue
<template>
<div>
<child-component:message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
</script>
// ChildComponent.vue
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>
5. Événements personnalisés
Components peuvent émettre des événements personnalisés pour communiquer avec leur parent components. Le parent components peut écouter ces événements et réagir en conséquence.
Exemple:
// ChildComponent.vue
<template>
<div>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$emit('increment-event');
}
}
};
</script>
// ParentComponent.vue
<template>
<div>
<child-component @increment-event="handleIncrement"></child-component>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
count: 0
};
},
methods: {
handleIncrement() {
this.count++;
}
}
};
</script>
Ces exemples présentent les concepts clés de Vue.js components, démontrant leur flexibilité, leur réutilisabilité et leurs capacités de communication. Components aider à créer un code modulaire et maintenable, faisant de Vue.js un framework puissant pour créer des applications évolutives.