vue项目setup开发过程中的一些问题--获取动态组件实例，并调用方法

关于 vue3 setup 调用动态组件内的方法的说明

父组件

<template>
  <component ref="componentDom"></component>
</template>
<script setup>

let keyword = ref(null); // 找到想要那个
const componentDom = ref(null); // 这将会是个组件数组

onMounted(async () => {

  keyword = componentDom.value.find((item) => item?.type === "keyword");

});

// 示例，调用子组件方法（重置操作）
const handlerReset = () => {
  searchForm.value.resetFields();

  keyword?.type && keyword.handlerClear();
};

</script>

子组件

<script setup>

const handlerClear = () => {
  curPageData.key = "";
  curPageData.value = "";
};

const selectRef = ref();

const getDom = () => {
  return selectRef.value;
};

defineExpose({
  getDom, // 可有可无
  handlerClear,
  type: "keyword",
});
</script>

• 重点：

还需要用defineExpose暴露出来，如果想调用子组件的方法，也需要暴露出来方法。