fix(Form): optimize ref bind for ProFormComponent (#555)

Author: tolking

src/Form/FormComponent.ts

@@ -1,13 +1,4 @@
-import {
-  computed,
-  defineComponent,
-  h,
-  mergeProps,
-  onMounted,
-  reactive,
-  ref,
-  resolveComponent,
-} from 'vue'
+import { computed, defineComponent, h, mergeProps, resolveComponent } from 'vue'
 import { isFunction, isObject, isString } from '../utils/index'
 import { formComponentProps } from './props'
 import type { Slot } from 'vue'
@@ -23,18 +14,16 @@ interface TargetEvent {
 export default defineComponent({
   name: 'ProFormComponent',
   props: formComponentProps,
-  setup(props, { attrs, emit, expose }) {
+  setup(props, { attrs, emit }) {
     const nativeComponents = ['input', 'textarea', 'select']
-    const componentRef = ref<StringObject>({})
-    const componentExpose = reactive<StringObject>({})
 
     const type = computed(() => {
       return isString(props.is) && !nativeComponents.includes(props.is)
         ? resolveComponent(props.is)
         : props.is!
     })
     const componentProps = computed(() => {
-      const _props: StringObject = mergeProps({ ref: componentRef }, attrs)
+      const _props: StringObject = mergeProps({ ref: props._ref }, attrs)
 
       if (isString(props.is) && nativeComponents.includes(props.is)) {
         if (
@@ -73,12 +62,6 @@ export default defineComponent({
       }
     })
 
-    onMounted(() => {
-      Object.assign(componentExpose, componentRef.value)
-    })
-
-    expose(componentExpose)
-
     return () => h(type.value, componentProps.value, children.value)
   },
 })

src/Form/FormItem.ts

@@ -97,6 +97,9 @@ export default defineComponent({
             mergeProps(props.item.props || {}, {
               ...modelProps.value,
               is: props.item.component,
+              // Replace ref with _ref to avoid binding to ProFormComponent
+              ref: undefined,
+              _ref: props.item.props?.ref,
             }),
           ),
         )

src/Form/index.test.ts

@@ -270,7 +270,7 @@ describe('ProFormComponent', () => {
   test.concurrent('expose', async () => {
     const wrapper = await mount({
       template:
-        '<pro-form-component ref="inputRef" v-model="form" is="el-input" />',
+        '<pro-form-component :_ref="(el) => inputRef = el" v-model="form" is="el-input" />',
       setup() {
         const form = ref()
         const inputRef = ref()

src/Form/props.ts

@@ -10,7 +10,7 @@ import {
   isString,
   isNumber,
 } from '../utils/index'
-import type { Component, PropType } from 'vue'
+import type { Component, PropType, VNodeRef } from 'vue'
 import type { CollapseModelValue, TabPaneName } from 'element-plus'
 import type {
   ColumnPropsSlots,
@@ -57,6 +57,7 @@ export const formComponentProps = {
     type: [String, Object] as PropType<string | Component>,
     require: true,
   },
+  _ref: [String, Object, Function] as PropType<VNodeRef>,
   slots: [Function, Object, String] as PropType<ColumnPropsSlots>,
 }