vue在同一页面中父组件多次引用同一子组件$emit回调监听问题

页面：
在父组件页面引用三个子组件，三个子组件都是同一文件。

图片上传子组件

<template>
	<!-- 内容 -->
	<div>
		<!-- 图片上传 -->
		<div class="modal fade" id="imgModel">
			<div class="modal-dialog modal-sm" style="width:500px;">
				<div class="modal-content" style="">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="closeModel"><span aria-hidden="true">&times;</span></button>
						<h4>图片信息</h4>
					</div>
					<div class="panel-collapse collapse in" style="margin-top:20px;">
						<div class=" box-body">
							<div class="box-header with-border tab-pane fade tabpane active in">
								<el-upload
									class="upload-demo"
									:action="uploadUrl"
									:on-preview="handlePreview"
									:on-remove="handleRemove"
									:file-list="fileList"
									:headers="headers"
									:onSuccess="uploadSuccess"
									:limit="number"
									:before-upload="beforeAvatarUpload"
									:on-exceed="onExceed"
									:before-remove = "beforeRemove"
									 ref="upload"
									list-type="picture"
								>
									<el-button size="small" type="primary">点击上传</el-button>
									<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
								</el-upload>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

上传成功后的回调

uploadSuccess(response, file, fileList) {
			 this.$message({
				type: 'success',
				message: '文件上传成功'
			});
			this.$emit("uploaded",response.data);
			this.$refs.upload.clearFiles();
			$('#imgModel').modal('hide');
		},

父组件页面代码

<!-- 文件上传 -->
		<upload-file-mian :filePath="addForm.mian" ref="uploadFileModel_mian" v-on:uploaded="reUpload_mian($event)"></upload-file-mian>
		<upload-file-details :filePath="addForm.details" ref="uploadFileModel_details" v-on:uploaded="reUpload_details($event)"></upload-file-details>
		<upload-file-compenstation :filePath="addForm.compenstation" ref="uploadFileModel_compenstation" v-on:uploaded="reUpload_compenstation($event)"></upload-file-compenstation>
		

页面引入

const uploadFileMian = resolve => {
	require.ensure(['@/components/common/uploadFile'], () => {
		resolve(require('@/components/common/uploadFile'));
	});
};
const uploadFileDetails = resolve => {
	require.ensure(['@/components/common/uploadFile'], () => {
		resolve(require('@/components/common/uploadFile'));
	});
};
const uploadFileCompenstation = resolve => {
	require.ensure(['@/components/common/uploadFile'], () => {
		resolve(require('@/components/common/uploadFile'));
	});
};

组件的注册

components: {
		uploadFileMian,
		uploadFileDetails,
		uploadFileCompenstation
	},

页面的点击上传时调用

//调用文件子组件
		uploadImg_mian() {
			console.log(this.addForm)
			this.$refs.uploadFileModel_mian.uploadImg(this.addForm.main);
		},
		uploadImg_details() {
			console.log(this.addForm)
			this.$refs.uploadFileModel_details.uploadImg(this.addForm.details);
		},
		uploadImg_compenstation() {
			this.$refs.uploadFileModel_compenstation.uploadImg(this.addForm.compenstation);
		},

上传成功后父组件的回调

reUpload_mian(url) {
			this.addForm.mian = url;
			console.log("回调：reUpload_mian")
		},
		reUpload_details(url) {
			this.addForm.details = url;
			console.log("回调：reUpload_details")
		},
		reUpload_compenstation(url) {
			this.addForm.compenstation = url;
			console.log(this.addForm)
		},

测试问题

出现问题：触发第一个上传回调的是“reUpload_mian”这个方法，触发第二上传按道理来说回调的是“reUpload_details”结果依然是：“reUpload_mian”这个方法不知道为什么？，各位有没有什么解决方法。