vue 子组件向父组件传值
子组件：



父组件接收使用：


使用

子组件：uploadData.vue







父组件：upload.vue

子组件使用this.$emit()向父组件传值
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性**。

子组件向父组件传值


父组件中引入子组件

使用important引入组件

比如
import diubao  from './diubao'

声明
//定义组件
export default {
	components: {
      diubao 
    }
}

使用组件
<diubao v-if="diubaoShow" @diubaosend="sendmessage" ref="toDiubao"/>



子组件向父组件传值

子组件向父组件传值使用 this.$emit(“function” , param); 其中function为父组件定义函数，param为需要传递参数。
sendmessage(params) {
    this.$emit('diubaosend', params)
},

父组件中，在引用子组件处添加函数v-on:function=“function1”，其中function为子组件中定义函数，function1为父组件中定义函数----用于接收子组件传值并进行数据处理，可定义为同一名称。
<diubao v-if="diubaoShow" @diubaosend="sendmessage" ref="toDiubao"/>

sendmessage(params) {
    console.log("index", params)
    this.$refs.toSocket.onSendWebsocket(params);
},



父组件触发子组件方法
1、在子组件中：<div></div>是必须要存在的 ；

2、在父组件中：首先要引入子组件import Child from './child';；

3、 <child ref="mychild"></child>是在父组件中为子组件添加一个占位，ref="mychild"是子组件在父组件中的名字；

4、父组件中components: {是声明子组件在父组件中的名字；

5、在父组件的方法中调用子组件的方法，很重要this.$refs.mychild.parentHandleclick("嘿嘿嘿");

                    

                    

                    
                    
                    
问题
开发中，会发现很多公共部分，可以独立封装起来，让更多的地方统一调用，这就是组件的作用，今天简单封装了一个图片上传的组件，当子组件中图片上传成功后，怎么传到父级组件呢？
代码
直接上代码
父组件
<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)
 }