Vue 组件通信如何通过 Props 传递文件上传的限制规则配置给子组件

最常用且清晰的方式是通过 props 传递文件上传限制规则，需确保类型明确、默认合理、校验到位：定义 fileType（数组，默认空）、fileSize（数字，单位 MB，默认 10）、multiple（布尔，默认 true）、limit（数字）和 required（布尔）；父组件调用时语义化传参；子组件在 before-upload 中校验并降级处理，校验失败 return false 并通过 emit 通知父组件状态变化。

直接通过 props 把文件上传的限制规则传给子组件，是最常用也最清晰的方式。关键不是“能不能传”，而是“怎么传得安全、可读、易维护”。核心就三点：类型明确、默认合理、校验到位。

明确声明 Props 类型和约束

在子组件中用 defineProps（Vue 3）或 props 选项（Vue 2）定义接收字段，每项都注明类型、是否必填、默认值：

1. fileType：数组类型，如 ['.pdf', '.docx']，默认为空数组，表示不限类型
2. fileSize：数字类型，单位 MB，例如 5 表示最大 5MB，设默认值 10
3. multiple：布尔值，控制是否允许多选，默认 true
4. limit：数字，限制最多上传几个文件，与 multiple 配合使用
5. required：布尔值，标识该上传是否为必填项，影响表单校验逻辑

父组件调用时传参要语义化

避免硬编码字符串或魔法数字。用具名属性传递，让调用意图一目了然：

1. 传图片限制：<FileUpload :file-type="['.jpg','.png','.webp']" :file-size="2" />
2. 传合同文档限制：<FileUpload :file-type="['.pdf','.doc','.docx']" :file-size="20" :limit="1" />
3. 允许用户自由上传但加兜底保护：<FileUpload :file-size="50" />（其他按默认值走）

子组件内做校验和降级处理

不能完全信任父组件传来的值。子组件应在 before-upload 钩子中主动校验，并给出友好提示：

1. 若 fileType 是空数组，跳过格式检查；否则用 file.name.toLowerCase().endsWith() 判断后缀
2. 大小校验统一转成字节比对：file.size > props.fileSize * 1024 * 1024
3. 如果 limit 已达上限，on-exceed 中弹提示，不自动追加到列表
4. 所有校验失败都 return false，阻止上传，避免无效请求打到后端

配合 emit 实现双向反馈

props 只负责“输入规则”，子组件需通过 emit 主动通知父组件状态变化：

1. 上传成功后 emit('update:modelValue', url) 或 emit('change', fileList)
2. 校验失败时 emit('error', { type: 'size', message: '文件不能超过 10MB' })
3. 删除文件时 emit('remove', file)，让父组件决定是否更新本地列表