Core Concepts

Components

Build reusable Vue components with props, emits, slots, and the Composition API.

Props

Props are how parent components pass data down to child components. Declare them with defineProps.

Emits

Child components communicate back to parents by emitting events with defineEmits.

Slots

Slots allow parent components to inject content into child component templates — great for reusable layout components.

Component Lifecycle

Key lifecycle hooks in the Composition API:

onMounted — component is added to the DOM
onUnmounted — component is removed
onUpdated — component's DOM has been updated

Example

javascript

<!-- Button.vue -->
<template>
  <button
    :class="['btn', variant]"
    :disabled="disabled"
    @click="$emit('click', $event)"
  >
    <slot>{{ label }}</slot>
  </button>
</template>

<script setup>
defineProps({
  label: { type: String, default: 'Click me' },
  variant: { type: String, default: 'primary' },
  disabled: { type: Boolean, default: false },
});

defineEmits(['click']);
</script>

<!-- UserCard.vue - using slots -->
<template>
  <div class="card">
    <slot name="header" />
    <div class="body"><slot /></div>
    <slot name="footer" />
  </div>
</template>

<!-- Parent usage -->
<template>
  <Button variant="danger" @click="handleDelete">
    <span>Delete Item</span>
  </Button>

  <UserCard>
    <template #header><h2>{{ user.name }}</h2></template>
    <p>{{ user.bio }}</p>
    <template #footer>
      <Button @click="followUser">Follow</Button>
    </template>
  </UserCard>
</template>

Try it yourself — JAVASCRIPT