How can i access child component method in parent component using ref in Vue3?

Question

I am trying to access the child method in the parent component using vue3 and ref method. But it returns an error.

Uncaught TypeError: addNewPaper.value?.savePaper is not a function

Below is my code. Please guide me where i am wrong.

Child component

<script setup lang="ts">
import { useWindowScroll } from '@vueuse/core'
import { Notyf } from 'notyf'
import { computed, defineProps, reactive, ref } from 'vue'
import { papers } from '/@src/firebase/connections'

const companySize = ref('')
const businessType = ref('')
const productToDemo = ref('')
const date = ref(new Date())

const { y } = useWindowScroll()

const isStuck = computed(() => {
  return y.value > 30
})

const initialState = reactive({
  subject: '',
  paper: '',
  marks: '',
})

const notyf = new Notyf()

const props = defineProps({
  subjects: { required: true },
})

const savePaper = () => {
  papers
    .add(initialState)
    .then(() => {
      notyf.success('Paper saved successfully')
    })
    .catch((err) => {
      notyf.error('Something went wrong')
    })
}
</script>

Parent component


const addNewPaper = ref()


const successSave = () => {
  addNewPaper.value?.savePaper()
  notyf.success('Your paper has been successfully created!')
}

 <template #content>
   <FormAddNewTopical ref="addNewPaper" :subjects="_subjects"></FormAddNewTopical>
 </template>

Any solution appreciated!

Estus Flask · Accepted Answer · 2022-06-12 07:43:18Z

11

Public members are supposed to be defined with defineExpose with script setup syntax:

defineExpose({ savePaper })

Or with ctx.expose in setup function:

setup(props, ctx) {
  ...
  ctx.expose({ savePaper })
  ...

edited Jun 12, 2022 at 7:43

answered Jun 12, 2022 at 7:23

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

10 Comments

Robin Singh Over a year ago

I am trying to use the same but it throws an error Module '"vue"' has no exported member 'defineExpose'.Vetur(2305)

Estus Flask Over a year ago

Check the linked documentation, it shows that define functions don't need to be imported, they are parts of script setup syntax. I'm quite sure that defineExpose is compiled to ctx.expose then.

Robin Singh Over a year ago

Cannot find the name defineExpose. This is the error now coming. Also same for ctx

Estus Flask Over a year ago

Where does the error come from? Does the app compile? You listed Vetur error previously that can behave differently

Estus Flask Over a year ago

@RobinSingh Please, specify the exact errors. There's a big difference if it comes from a compiler or an editor, and if it comes from TS at compilation time or JS at runtime. Make sure you use the latest Vue version. Also check stackoverflow.com/a/69999044/3731501

|

Collectives™ on Stack Overflow

How can i access child component method in parent component using ref in Vue3?

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related