Components, Props, and Emits

Professional Track: Complete this lesson with a working implementation, architecture notes, and a documented trade-off decision.

Overview

Components are contracts. Professional Vue teams design component APIs intentionally to optimize readability, reusability, and safe evolution over time.

Component API Design

Props as explicit contracts

const props = defineProps({
  title: { type: String, required: true },
  disabled: { type: Boolean, default: false },
  variant: { type: String, default: 'primary' }
})

Prefer small, cohesive props over giant prop bags that combine unrelated concerns.

Emits for outbound events

const emit = defineEmits(['save', 'cancel'])

function onSaveClick() {
  emit('save')
}

Composition with Slots

Default and named slots

<BaseCard>
  <template #header>Billing Summary</template>
  <template #default>...content...</template>
  <template #footer><button>Export</button></template>
</BaseCard>

Slot guidelines

  • Use slots for structural customization.
  • Use props for data/configuration.
  • Avoid slot overuse when a focused component variant is clearer.

Communication Boundaries

One-way data flow

Parent owns state, child receives props and emits events. This keeps state ownership auditable and easier to debug.

Provide/inject caution

Use provide/inject for infrastructure-like context (theme, i18n, service objects), not as hidden global state replacement.

Learning Objectives

  • Create component APIs with explicit props and events.
  • Use slots for flexible layout composition.
  • Avoid prop-drilling by designing feature boundaries.

Common Mistakes

  • Too many boolean props causing unreadable branching and state combinations.
  • Mutating prop objects directly in child components.
  • Emitting inconsistent event payload shapes across similar components.

Engineering Notes

Define component API review rules in pull requests: naming clarity, payload consistency, accessibility implications, and backward compatibility.

Practice Scope

Deliver one production-style mini-feature, include implementation notes, and record one performance, reliability, or maintainability trade-off in your commit summary.

Back to roadmap: Vue Roadmap