Refs methods in vue-composition-api

Question

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?

tony19 · Accepted Answer · 2021-12-16 14:44:07Z

2

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>

answered Dec 16, 2021 at 14:44

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1