Solve Vue.js Component Overload with Parent-Child Patterns
Has your Vue component become a tangled mess? Too much template markup, too many responsibilities, and decreasing maintainability.
Well the solution is to use component composition with parent-child relationships that Vue provides.
In this tutorial, you'll learn to:
1. Refactor effectively breaking up monolithic components into focused children
2. Pass data gracefully using props to send data from parent to child
3. Handle child events by capturing custom events emitted by child components
4. Maintain clean data flow by establishing predictable communication between components
See a real-world example where a parent component delegates UI to a specialized Toolbar child, creating cleaner code and better separation of concerns.
Parent Component:
<template>
<div class="parent-component">
<h2>Evaluate Product</h2>
<Toolbar :message="message" @evaluate-product="evaluate" />
<div class="parent-data">
<p>Total Likes: {{ total.likes }}</p>
<p>Total Dislikes: {{ total.dislikes }}</p>
<p v-if="action">Last Action: {{ action }}</p>
</div>
</div>
</template>
<script>
import Toolbar from './Toolbar.vue';
export default {
name: 'EvaluateComponent',
components: {
Toolbar
},
data(){
return {
total: {
likes: 0,
dislikes: 0
},
message: '',
action: null,
messageTimeout: null
}
},
methods:{
evaluate(task) {
// Clear previous timeout
if (this.messageTimeout) {
clearTimeout(this.messageTimeout);
}
switch(task) {
case 'like':
this.total.likes++;
this.message = "Like incremented successfully!";
this.action = 'like';
break;
case 'dislike':
this.total.dislikes++;
this.message = "Dislike incremented successfully!";
this.action = 'dislike';
break;
}
// Auto-clear message after 3 seconds
this.messageTimeout = setTimeout(() => {
this.message = '';
}, 3000);
}
},
beforeDestroy() {
// Clean up timeout when component is destroyed
if (this.messageTimeout) {
clearTimeout(this.messageTimeout);
}
}
}
</script>
Child Component (Toolbar tag in the parent):
<template>
<div class="child-component">
<div class="message" v-if="messageSet">{{ message }}</div>
<button @click="performEvaluate('like')">Like</button>
<button @click="performEvaluate('dislike')">Dislike</button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: ''
}
},
data() {
return {
// You can add data properties here if needed
}
},
emits: ['evaluate-product'],
computed: {
messageSet() {
return this.message.length > 0;
}
},
methods: {
performEvaluate(evaluation) {
this.$emit('evaluate-product', evaluation);
}
}
}
</script>