Vue Components defineProps, defineEmits, Slots: Tutorial, Examples, FAQs & Interview Tips

Components in Vue

Components are reusable, self-contained pieces of UI. In Vue 3, components are defined as Single File Components (.vue files) containing template, script, and style sections.

Components - Props, Emits, Slots

<!-- components/AppButton.vue -->
<template>
  <button
    :class="['btn', `btn-${variant}`, `btn-${size}`, { loading }]"
    :disabled="disabled || loading"
    @click="$emit('click', $event)"
  >
    <span v-if="loading" class="spinner"></span>
    <slot>{{ label }}</slot>
  </button>
</template>

<script setup>
// defineProps - declare accepted props
const props = defineProps({
  label:    { type: String, default: 'Click me' },
  variant:  { type: String, default: 'primary', validator: v => ['primary','secondary','danger'].includes(v) },
  size:     { type: String, default: 'md' },
  disabled: { type: Boolean, default: false },
  loading:  { type: Boolean, default: false },
})

// defineEmits - declare emitted events
const emit = defineEmits(['click'])
</script>

<style scoped>
.btn { padding: 8px 16px; border-radius: 4px; cursor: pointer; }
.btn-primary   { background: #42b883; color: white; }
.btn-secondary { background: #6c757d; color: white; }
.btn-danger    { background: #dc3545; color: white; }
.btn-sm { padding: 4px 8px; font-size: 0.875rem; }
.btn-lg { padding: 12px 24px; font-size: 1.125rem; }
.loading { opacity: 0.7; cursor: not-allowed; }
</style>

<!-- components/AppCard.vue - using slots -->
<template>
  <div class="tl-card">
    <!-- Named slot: header -->
    <div v-if="$slots.header" class="tl-card-header">
      <slot name="header" />
    </div>

    <!-- Default slot: body content -->
    <div class="tl-card-body">
      <slot />
    </div>

    <!-- Named slot: footer -->
    <div v-if="$slots.footer" class="tl-card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<!-- Scoped slot - pass data from child to parent -->
<!-- components/DataList.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <!-- Pass item data to parent via scoped slot -->
      <slot :item="item" :index="items.indexOf(item)" />
    </li>
  </ul>
</template>

<script setup>
defineProps({ items: Array })
</script>

<!-- Parent.vue - using components -->
<template>
  <div>
    <!-- Using AppButton -->
    <AppButton label="Save" variant="primary" @click="save" />
    <AppButton variant="danger" :loading="isDeleting" @click="deleteItem">
      Delete  <!-- slot content overrides label -->
    </AppButton>

    <!-- Using AppCard with named slots -->
    <AppCard>
      <template #header>
        <h3>User Profile</h3>
      </template>

      <!-- Default slot -->
      <p>Name: Alice</p>
      <p>Email: alice@example.com</p>

      <template #footer>
        <AppButton label="Edit" size="sm" />
      </template>
    </AppCard>

    <!-- Using scoped slot -->
    <DataList :items="users">
      <template #default="{ item, index }">
        <span>{{ index + 1 }}. {{ item.name }}</span>
      </template>
    </DataList>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AppButton from './AppButton.vue'
import AppCard from './AppCard.vue'
import DataList from './DataList.vue'

const isDeleting = ref(false)
const users = ref([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }])

function save() { console.log('Saved!') }
async function deleteItem() {
  isDeleting.value = true
  await new Promise(r => setTimeout(r, 1000))
  isDeleting.value = false
}
</script>

Deep Dive: Components in Real Projects

Understanding Components is not just about syntax. In production applications, this topic directly affects maintainability, debugging speed, and team collaboration. Focus on readability, small reusable patterns, and predictable state flow when implementing Components.

A practical approach is to first implement the simplest working version, then refactor into reusable pieces (components/composables/stores) only when duplication appears. This helps keep your Vue codebase clean while avoiding over-engineering.

Common Mistakes to Avoid

Mixing too many responsibilities in one component instead of separating logic by concern.
Skipping meaningful naming for variables, emits, and component props.
Ignoring edge cases like empty data, loading states, and error handling.
Optimizing too early before measuring real bottlenecks in browser devtools.
Not creating small test scenarios to validate behavior after each change.

Mini Practice Checklist

Build a small demo focused only on Components.
Add one edge case (empty/loading/error) and handle it cleanly.
Refactor repeated logic into a reusable function/composable.
Add clear comments only where logic is non-obvious.
Verify behavior with manual testing and Vue Devtools.

Key Takeaways

This chapter on Components focuses on practical Vue 3 patterns used in real projects.
Prefer the Composition API with script setup for cleaner and more scalable component logic.
Keep components focused and move reusable logic into composables when complexity grows.
Use Vue Devtools to inspect component state, props, emits, and performance during development.
Write small experiments for each concept before applying it in production code.
After finishing this chapter, continue to the next related topic in the Vue roadmap.

Vue Components defineProps, defineEmits, Slots: Tutorial, Examples, FAQs & Interview Tips

Components in Vue

Deep Dive: Components in Real Projects

Common Mistakes to Avoid

Mini Practice Checklist

Level Up Your Vue js Skills

Popular Tutorials

Ready to Level Up Your Skills?