0

In Vue 2 or options API to call a child method from its own parent, we could do it by defining a ref; accessing the ref and calling the method. something like this:

<template>
 <my-component ref="childComponent" />
</template>

<script>
export defult {
 name: 'parentComponent',
 mounted() {
   this.$refs.childComponent.childMethod()
 }
</script>

but how we can do that in Vue 3 or composition API?

Mohammad Javad Khademian
  • 508
  • 1
  • 4
  • 16
  • 2
    Does this answer your question? [Vue3 Parent component call child component method](https://stackoverflow.com/questions/73725505/vue3-parent-component-call-child-component-method) – Moritz Ringler Jul 18 '23 at 14:33

1 Answers1

1

We can achieve that in a similar way but with a little difference. Like options API we define a ref on the template. Then we access that reference like the following:

const childComponent = ref(null)

note that the variable name must be exactly equal to ref value in the template

Then calling the child method:

childComponent.value.childMethod()

But if you try it you'll see that childMethod is not accessible. (childMethod is not a function.)

According to the document

"Components using 'script setup' are closed by default".

So, to enable accessing the method from outside of current component, easily expose it using the defineExpose macro in the child component:

<script setup>
function childMethod () {
 // I do nothing :P
}

defineExpose({ childMethod })
</script>
Mohammad Javad Khademian
  • 508
  • 1
  • 4
  • 16