javascript - 如何在 Vue3 中使用 ref 访问父组件中的子组件方法？

Question

我正在尝试使用 vue3 和 ref 方法访问父组件中的子方法。但它返回一个错误。

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

下面是我的代码。请指导我哪里错了。

子组件

<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>

父组件

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>

感谢任何解决方案!

Answer 1

公共(public)成员应该用 defineExpose 定义使用 脚本设置 语法:

defineExpose({ savePaper })

或在 setup function 中使用 ctx.expose :

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