🧩 What is a Component?
A component in Vue is a reusable instance of a Vue app, with its own:
- template (HTML structure)
- script (data, methods, props)
- styles (optional CSS)
They help you organize, reuse, and maintain code easily.
⚙️ Basic Structure of a Component
A Vue component file (usually .vue) has three main sections:
<template>
<div class="greeting">
<h1>Hello, {{ name }}!</h1>
</div>
</template>
<script>
export default {
name: 'GreetingComponent',
props: {
name: {
type: String,
required: true
}
}
}
</script>
<style scoped>
.greeting {
color: #42b983;
}
</style>
🧱 Types of Components
- Root Component – the main Vue instance (usually
App.vue). - Child Components – reusable parts imported and used in other components.
Example usage:
<!-- App.vue -->
<template>
<div>
<GreetingComponent name="Alice" />
</div>
</template>
<script>
import GreetingComponent from './components/GreetingComponent.vue'
export default {
components: {
GreetingComponent
}
}
</script>
🔄 Component Communication
Components communicate via:
- Props → Parent → Child
- Events (emits) → Child → Parent
- Provide/Inject → Grandparent → Deep children
- State management (e.g., Pinia, Vuex) → For global state
Example:
<!-- Child.vue -->
<template>
<button @click="$emit('increment')">+</button>
</template>
<!-- Parent.vue -->
<template>
<CounterButton @increment="count++" />
<p>Count: {{ count }}</p>
</template>
<script>
import CounterButton from './CounterButton.vue'
export default {
components: { CounterButton },
data() {
return { count: 0 }
}
}
</script>