问题

开发中，会发现很多公共部分，可以独立封装起来，让更多的地方统一调用，这就是组件的作用，今天简单封装了一个图片上传的组件，当子组件中图片上传成功后，怎么传到父级组件呢？

代码

直接上代码

父组件

<upload-image
label="网站LOGO"
prop="site_logo"
:value="basicForm.site_logo"
@func="getImg"
/>

<script>
import uploadImage from '../../components/uploadImage.vue'
export default {
  components: { uploadImage },
    // 其他代码
}

子组件

<!--
 * @Description:单图上传
 * @User: Vijay <1937832819@qq.com>
 * @Date: 2020-11-21 20:42:50
-->
<template>
  <div>
    <el-form-item :label="label" :prop="fieldName">
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :headers="{ Authorization: 'Bearer ' + this.token }"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="img" :src="img" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
  </div>
</template>

<script>
import util from '@/libs/util'
import axios from 'axios'

export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    fieldName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      img_file: {},
      token: util.cookies.get('token'),
      uploadUrl: process.env.VUE_APP_API + 'admin/article/upload',
      img: this.value
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess(res, file) {
      this.img = URL.createObjectURL(file.raw)
      // func: 是父组件指定的传数据绑定的函数，this.img:子组件给父组件传递的数据
      this.$emit('func', this.img)
    },
    // 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData()
      formdata.append('file', $file)
      this.img_file[pos] = $file
      axios({
        url: this.uploadUrl,
        method: 'post',
        data: formdata,
        headers: {
          Authorization: 'Bearer ' + this.token,
          'Content-Type': 'multipart/form-data'
        }
      })
        .then((res) => {
          // let _res = res.data
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          // this.$refs.md.$img2Url(pos, _res.url)
        })
        .catch((err) => {
          console.log('err', err)
        })
    },
    $imgDel(pos) {
      delete this.img_file[pos]
    }
  }
}
</script>

解释

子组件通过this.$emit()的方式将值传递给父组件

// func: 是父组件指定的传数据绑定的函数，this.img:子组件给父组件传递的数据
this.$emit('func', this.img)

注意：这里的func是父组件中绑定的函数名
父组件中接收传递值

@func="getImg"

 getImg(data) {
 // 这里可以拿到传过来的值
 console.log(data)
 }