vue3中怎么使用$refs,子向父传值（form表单）?

Question

怎样把form表单里的值传到父组件中？

子组件：

<el-form 
    :model="formData1"
    ref="vForm"
    label-width="80px" 
    class="mx-auto" 
    style="width: 900px" 
    label-position="top"
        require-asterisk-position="right">

const state = reactive({
    formData1: {
        allow: true,
        planTimeType: '0',
        planPay: true,
        planTimeAfter: 0,
        planTimeMin: 0,
        planPayType: '0',
        planPayNum: 0,
        planPayDay: '0'

    },
    transformOptions: [
        {
            label: '每月结转',
            value: '0'
        }
    ]
})
const { formData1, transformOptions } = toRefs(state)
const instance = getCurrentInstance()
const submitForm = () => {
    // @ts-ignore
    instance.proxy.$refs.vForm
}

defineExpose({
    submitForm
})

父组件
在template中引入子组件

<workDay ref="workDayRef"></workDay>
<div class="flex justify-center gap-2 footer">
        <CustomButton type="primary" class="my-5" @click="addOverPlane">保存</CustomButton>
        <CustomButton class="my-5">取消</CustomButton>
  </div>

const addOverPlane=()=>{

}

子组件和父组件怎么写才能在父组件中得到子组件表单的值啊

Answer 1

// 子组件 把 formData1 暴露出来
defineExpose({
    formData1
})


// 父组件
const workDayRef = ref()
...
const getFormData = () => {
    if (!workDayRef.value) return
    return workDayRef.value.formData1 // 获取子组件暴露出来的数据
}