What is defineExpose in Vue.js? (With Simple Example)

It’s used to share things (like functions or data) from a child component to its parent — but only if you want to.

Let’s see what it is, why you need it, and how to use it.

💡 Why Use defineExpose?

When you use the <script setup> style in Vue 3, everything inside is private by default. That means a parent component can’t access anything inside a child component — unless you expose it.

That’s where defineExpose() comes in.

🧪 Example: Expose a Method to the Parent

👶 ChildComponent.vue

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

function reset() {
  count.value = 0
}

// 👇 Make reset() available to the parent
defineExpose({
  reset
})
</script>

👨‍👩‍👧 ParentComponent.vue

<template>
  <ChildComponent ref="childRef" />
  <button @click="resetChild">Reset from Parent</button>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref(null)

function resetChild() {
  childRef.value.reset() // Call child’s reset() method
}
</script>

✅ When to Use It

Use defineExpose if:

• You want the parent to call a method in the child (like reset, submit, etc.)
• You want to get data from the child component

⚠️ Notes

• Only works inside <script setup>
• Only needed if parent uses ref to access the child
• Keeps your code clean and controlled by exposing only what’s needed