[Vuejs]-Calling a child component's method from the parent in Vue composition API?

by

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

Leave a comment