背景

今天，遇到一个小问题，就是自定义上传组件，想在上传完文件后，对文件内容进行校验，需要调用后台接口，一时间有点懵圈，因为这是一个通用的组件，不应该为了一个需求而更改自己的组件逻辑。

知识点

其实，在vue中组件间通信也是有函数库的。可以了解一下emit函数。

实现逻辑

首先，子组件中使用emit函数来向父组件中传递参数； 然后，在父组件中设置响应的函数来接收子组件的传参即可实现；

实现步骤

子组件中创建emit函数调用传参

代码如下：

<template>
  <div>
    <a-upload-dragger
      @change="handleChange"
    >
    </a-upload-dragger>
  </div>
</template>

// 上传回调
function handleChange(info) {
   emit('change', successImgUrl, vdata.fileList)
}

从上面可以看到有这么一行代码： emit('change',vdata.successImgUrl,info.fileList)

父组件中通过函数来接收参数

  <a-row v-if="vdata.saveObject.projectType == 'BILL'">
              <a-col :span="10">
                <a-form-item name="projectPayersUrl">
                  <JeepayUploadDragger
                    @change="checkExcelInfo"
                  />
                </a-form-item>
              </a-col>
            </a-row>

// 校验excel是否填写正确
function checkExcelInfo(successImgUrl,fileList) {
    vdata.saveObject.projectPayersUrl = successImgUrl
}

上面有一行代码： @change="checkExcelInfo" 可以看到，这里是通过change来绑定了checkExcelInfo函数来接收处理子组件传递过来的参数。此处的change就是我们子组件中的emit绑定的change。两个名字是一致的。

这样就轻松搞定了，子组件向父组件传递函数的操作了。 好了，欢迎大家点击下方卡片，关注《coder练习生》