Back
VueMediumNew
What does `defineExpose` do and why is it needed?
script setup components are private by default
Ideal Answer
Components using <script setup> are 'closed' by default — their internal bindings aren't accessible to a parent via template refs, unlike Options API components. defineExpose explicitly exposes specific properties/methods to the parent:
JavaScript
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset })
</script>
The parent can then call childRef.value.reset() via a template ref, without exposing the entire internal state of the child.