vue3父子组件传值

子组件

<template>
  <div>
    <el-space fill style="margin-bottom: 20px">
      <el-alert type="info" show-icon :closable="false">
        <p>{{tips}}</p>
      </el-alert>
    </el-space>
    <el-upload
    v-model:file-list="fileList"
    :auto-upload="false" 
    :on-change="handleChangeUpload" 
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :limit="4"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="showUrlVisible" title="预览">
    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width:100%"/>
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { handleImageUpload } from "@/api/publicApi/index";
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { propTypes } from '@/utils/propTypes'
import { defineEmits,defineExpose } from 'vue'

const emit = defineEmits(['getUploadImage'])
const props = defineProps({
  tips: propTypes.string.def('图片格式“jpg、png”,单张图片大小10M以内')
})

const disabled = ref(false) 
const fileList = ref<UploadUserFile[]>([])
  const dialogFormVisible = ref<boolean>(false);
  const dialogImageUrl = ref('')
  const showUrlVisible = ref<boolean>(false);
const handleChangeUpload = async (event) => { //上传图片
    let data = new FormData();
    data.append("file", event.raw);
    let res: any = await handleImageUpload(data);
    if (res.code == 0) {
      dialogImageUrl.value = res.data;
      dialogImageUrl.value = res.data;
        ElMessage({ message: '上传成功', type: 'success' });
        emit('getUploadImage',res.data)
    }
}

const getImage=()=>{

  emit('getUploadImage',fileList.value)
}
defineExpose({
  fileList, getImage,
    })
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  showUrlVisible.value = true
}
</script>

父组件

<uploadImage tips="图片格式“jpg、png”,单张图片大小10M以内,最多可上传4张" @getUploadImage="getImage" ref="dialogImageUrl"/>
 import uploadImage from "@/views/BMartPay/SettleManagement/components/uploadImage.vue"
 const dialogImageUrl = ref<any>(null)
  console.log(dialogImageUrl.value.fileList)//获取值 子组件必须使用defineExpose暴露