Refs methods in vue-composition-api-CodePudding

there is a component with a ref like this:

<template>
  <custom-component
     ref="func"
  />
</template>

<script setup>
const func = ref();
</script>

and inside the component there is a function like this:

const helloWorld = () => {
    console.log('hello World');
}

how do i get accsess to helloWorld function from the parent component?

CodePudding user response：

Assuming your child component is also using <script setup>, the component's definitions are closed by default (not exposed).

You can manually expose the method with defineExpose in the child component:

// CustomComponent.vue
<script setup>
const helloWorld = /*...*/

defineExpose({
  helloWorld
})
</script>