vue3父组件调用子组件的ref

在vue3中，父组件调子组件的参数，如ref、属性、方法，都需要子组件先暴露出来，父组件才能取到。

子组件（ReUpload）中，定义了一个el-upload组件的ref uploadRef和属性fileList，需要使用defineExpose暴露给父组件。

<template>
    <el-upload
      ref="uploadRef"
      action="#"
      list-type="picture-card"
      v-model:file-list="fileList"
      :http-request="handleUpload"
      :on-success="handleSuccess"
    >
    </el-upload>
</template>

<script lang="ts" setup>
import type { UploadFile, UploadInstance } from "element-plus";
const uploadRef = ref<UploadInstance>();
const fileList = ref<UploadFile[]>([]);
    
//子组件
const myMethod = () => {
  console.log('Hello from myMethod!');
}


defineExpose({ fileList, uploadRef, myMethod });

</script>

父组件中，可以通过给引入的组件定义refreUploadRef1，去调用reUploadRef1的value，取子组件通过defineExpose暴露出来的参数、方法。

<template>

<ReUpload
 ref="reUploadRef1"
/>

</template>


<script setup lang="ts">
import { onMounted } from "vue";
import ReUpload from "@/components/ReUpload/index.vue";
const reUploadRef1 = ref();

onMounted(() => {
  reUploadRef1.value?.uploadRef.clearFiles();
  reUploadRef1.value?.fileList = [];
  reUploadRef1.myMethod();
})
</script>