javascript - How can i access child component method in parent component using ref in Vue3? - Stack Overflow

admin管理员组

文章数量:1345903

I am trying to access the child method in the parent ponent 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 ponent

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

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

const { y } = useWindowScroll()

const isStuck = puted(() => {
  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 ponent

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!

I am trying to access the child method in the parent ponent 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 ponent

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

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

const { y } = useWindowScroll()

const isStuck = puted(() => {
  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 ponent

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!

• javascript
• typescript
• vue.js
• vuejs3
• ref

Share Improve this question Follow asked Jun 12, 2022 at 7:11 Robin SinghRobin Singh 1,79633 gold badges1919 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 })
  ...

本文标签： javascriptHow can i access child component method in parent component using ref in Vue3Stack Overflow