diff --git a/src/Form/FormComponent.ts b/src/Form/FormComponent.ts index e8b2a7ca..46501284 100644 --- a/src/Form/FormComponent.ts +++ b/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,10 +14,8 @@ 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({}) - const componentExpose = reactive({}) const type = computed(() => { return isString(props.is) && !nativeComponents.includes(props.is) @@ -34,7 +23,7 @@ export default defineComponent({ : 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) }, }) diff --git a/src/Form/FormItem.ts b/src/Form/FormItem.ts index 173570bc..42b37e26 100644 --- a/src/Form/FormItem.ts +++ b/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, }), ), ) diff --git a/src/Form/index.test.ts b/src/Form/index.test.ts index 9fdd8c09..ed3dfa02 100644 --- a/src/Form/index.test.ts +++ b/src/Form/index.test.ts @@ -270,7 +270,7 @@ describe('ProFormComponent', () => { test.concurrent('expose', async () => { const wrapper = await mount({ template: - '', + '', setup() { const form = ref() const inputRef = ref() diff --git a/src/Form/props.ts b/src/Form/props.ts index 94f50c44..734060ad 100644 --- a/src/Form/props.ts +++ b/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, require: true, }, + _ref: [String, Object, Function] as PropType, slots: [Function, Object, String] as PropType, }