perf: improve api-component for using in form (#5796)

packages/effects/common-ui/src/components/api-component/api-component.vue

@@ -84,7 +84,7 @@ const emit = defineEmits<{
 const modelValue = defineModel({ default: '' });
 
 const attrs = useAttrs();
-
+const innerParams = ref({});
 const refOptions = ref<OptionsItem[]>([]);
 const loading = ref(false);
 // 首次是否加载过了
@@ -175,8 +175,15 @@ async function handleFetchForVisible(visible: boolean) {
   }
 }
 
+const params = computed(() => {
+  return {
+    ...props.params,
+    ...unref(innerParams),
+  };
+});
+
 watch(
-  () => props.params,
+  params,
   (value, oldValue) => {
     if (isEqual(value, oldValue)) {
       return;
@@ -189,12 +196,22 @@ watch(
 function emitChange() {
   emit('optionsChange', unref(getOptions));
 }
+const componentRef = ref();
+defineExpose({
+  /** 获取被包装的组件实例 */
+  getComponentRef: <T = any,>() => componentRef.value as T,
+  /** 更新Api参数 */
+  updateParam(newParams: Record<string, any>) {
+    innerParams.value = newParams;
+  },
+});
 </script>
 <template>
   <component
     :is="component"
     v-bind="bindProps"
     :placeholder="$attrs.placeholder"
+    ref="componentRef"
   >
     <template v-for="item in Object.keys($slots)" #[item]="data">
       <slot :name="item" v-bind="data || {}"></slot>