## Split Components
Componentization is Vue's core design philosophy.
In this chapter, you will learn how to split a page into reusable small components and implement component communication through props and emit.
* * *
## Why Split Components?
As features increase, a file will become longer and longer, with hundreds of lines of code in a single .vue file, making it difficult to maintain.
Purpose of splitting components: Each component does only one thing, and they combine to complete complex functions.
### What granularity is appropriate?
A good rule of thumb is: when a code block has its own data, its own behavior, and can be reused elsewhere, it should become an independent component.
| Page Area | Should it be split into a component | Reason |
| --- | --- | --- |
| Navigation Bar | Yes | Needed on every page, independent function |
| Article Card | Yes | Each article in the list has the same structure |
| Category Filter Button Group | Yes | Has its own state and interaction |
| Simple Wrapper Container | No | Just for layout, no independent behavior |
* * *
## Parent to Child: defineProps
Parent component passes data to child component through props.
You can think of it as "function parameters" - when the parent component calls the child component, it passes data as parameters.
## Example
// Declare Props Received by This Component
// defineProps It is a compiler macro, no import required
const props = defineProps({
title: String, // Article Title, String Type
summary: String, // Article Summary
date: String, // Publication Date
category: String // Category Tags
})
// Can also be written as an array (without type validation):
// const props = defineProps(['title', 'summary', 'date', 'category'])
> props is one-way data flow: only parent → child, child component cannot modify props value. If child component needs to modify, it should notify parent component through emit.
* * *
## Child to Parent: defineEmits
When child component needs to notify parent about something happening (like "I was clicked"), it sends events through emit.
You can think of it as "callback function" - child component triggers event, parent component listens and responds.
## Example
const props = defineProps({
categories: Array, // List of All Categories
activeCategory: String // Currently Selected Category
})
// Declare the Event to Emit
const emit = defineEmits(['update-category'])
function selectCategory(cat) {
// Emit Event to Pass the Selected Category to the Parent Component
emit('update-category', cat)
}
Parent component listens to child component events through `@event-name="handler"`:
## Example
import { ref, computed } from 'vue'
import CategoryFilter from '../components/CategoryFilter.vue'
const activeCategory = ref('All')
const categories = ['All', 'Vue', 'JavaScript', 'CSS']
// Respond to the update-category Event Emitted by Child Component
function handleCategoryChange(cat) {
activeCategory.value = cat
}
### Complete Data Flow
Parent component passes data downward through props, child component sends events upward through emit.
Data is always "owned" and modified by parent component, child component only handles display and notification
YouTip