Vue 3 Composition API: defineProps, defineEmits, defineExpose, defineOptions, and defineSlots – Detailed Guide and Usage Examples

Vue 3 introduces a set of composition‑API helper functions— defineProps , defineEmits , defineExpose , defineOptions , and defineSlots —that replace many of the traditional Options‑API patterns and enable more modular component development.

Function Overview

Function

Purpose

Basic Usage

Notes

defineProps

Declare component props

const props = defineProps({ ... })

Provides type‑safe prop definitions and validation.

defineEmits

Declare events the component can emit

const emit = defineEmits(["update:count"])

Replaces the traditional

$emit

with a type‑safe API.

defineExpose

Expose methods or properties to the parent

defineExpose({ reset })

Useful for highly reusable components that need to expose internal logic.

defineOptions

Set component options (name, components, directives) inside

setup

defineOptions({ name: "MyComp", components: {...}, directives: {...} })

Bridges Options‑API configuration with the composition API.

defineSlots

Access named and default slots programmatically

const slots = defineSlots()

Simplifies dynamic slot handling for complex layouts.

Usage Example – defineProps

<!-- Counter.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  initialCount: { type: Number, required: true }
})
const count = ref(props.initialCount)
function increment() { count.value++ }
</script>

Parent component that passes the prop:

<!-- Parent.vue -->
<template>
  <Counter :initialCount="100" />
</template>

<script setup lang="ts">
import Counter from './Counter.vue'
</script>

Usage Example – defineEmits

<!-- Counter.vue (with emits) -->
<script setup>
import { ref } from 'vue'
const props = defineProps({ initialCount: Number })
const emit = defineEmits(["update:count"])
const count = ref(props.initialCount)
function handleIncrement() {
  count.value++
  emit('update:count', count.value)
}
</script>

Parent listening to the emitted event:

<!-- Parent.vue -->
<template>
  <Counter :initialCount="100" @update:count="handleCountUpdate" />
</template>

<script setup lang="ts">
function handleCountUpdate(value: number) { console.log(value) }
</script>

Usage Example – defineExpose

<!-- Counter.vue exposing reset -->
<script setup>
import { ref, defineExpose } from 'vue'
const props = defineProps({ initialCount: Number })
const count = ref(props.initialCount)
function reset() { count.value = props.initialCount }
defineExpose({ reset })
</script>

Parent invoking the exposed method via ref :

<!-- Parent.vue -->
<template>
  <Counter ref="counter" :initialCount="10" />
  <button @click="counter.value.reset()">Reset Counter</button>
</template>

<script setup>
import { ref } from 'vue'
import Counter from './Counter.vue'
const counter = ref(null)
</script>

Usage Example – defineOptions

defineOptions({
  name: 'MyComponent',
  components: { ChildComponent },
  directives: { focus: { mounted(el) { el.focus() } } }
})

Usage Example – defineSlots

<!-- SlotComponent.vue -->
<template>
  <div class="header"><slot name="header" /></div>
  <div class="content"><slot /></div>
  <div class="footer"><slot name="footer" /></div>
</template>

<script setup>
import { defineSlots } from 'vue'
const slots = defineSlots()
console.log('Header:', slots.header ? slots.header() : 'No header')
console.log('Default:', slots.default ? slots.default() : 'No default')
console.log('Footer:', slots.footer ? slots.footer() : 'No footer')
</script>

Parent using the slots:

<!-- ParentComponent.vue -->
<template>
  <SlotComponent>
    <template #header><h2>Header Slot</h2></template>
    <template #footer><p>Footer Slot</p></template>
    Default content here
  </SlotComponent>
</template>

<script setup>
import SlotComponent from './SlotComponent.vue'
</script>

Applicable Scenarios Summary

defineProps + defineEmits : Ideal for simple components and rapid development, providing basic prop and event handling.

defineExpose : Suited for highly encapsulated components that need to expose internal methods.

defineOptions : Best for complex components requiring extensive configuration (name, sub‑components, directives).

defineSlots : Useful when dealing with dynamic content and advanced slot layouts.

Additional Tips

When using Vue 3 with ESLint, add the composition‑API helpers to the globals section of .eslintrc.js so the linter recognises them as read‑only globals.

// .eslintrc.js
module.exports = {
  env: { node: true, browser: true, es2021: true },
  parser: 'vue-eslint-parser',
  extends: ['eslint:recommended', 'plugin:vue/vue3-strongly-recommended'],
  parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint/parser', sourceType: 'module' },
  plugins: ['vue', '@typescript-eslint'],
  rules: { /* …custom rules… */ },
  globals: {
    withDefaults: true,
    defineExpose: true,
    defineEmits: true,
    defineProps: true,
    defineOptions: true,
    defineSlots: true
  }
}

The withDefaults helper can be combined with defineProps to provide default values and improve TypeScript inference:

const props = withDefaults(defineProps({
  message: String,
  count: { type: Number, default: 0 }
}), { message: 'hello', count: 0 })

Conclusion

By mastering defineProps , defineEmits , defineExpose , defineOptions , and defineSlots , Vue 3 developers gain fine‑grained control over component interfaces, event flows, and configuration, leading to cleaner, more maintainable, and highly reusable frontend code.