vue父子组件动态传值的几种方式及注意问题详解

<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
this.productImage=res.data.cover;

export default {
  name: '***',
  props: {
    srcList: {

    }
  },
  data() {
  	uploadImg: ''
  }
}

watch:{
    srcList(curVal,oldVal){
     if(curVal){
       this.uploadImg=curVal;
      }
   },
}

this.$refs.productImage.getSrcList(res.data.cover);

getSrcList(val){
this.uploadImg=val;
}

<FormItem label="上传头像" prop="image">
  <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg>
</FormItem>
<FormItem label="上传营业执照" prop="businessLicence">
  <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg>
</FormItem>

/*
    子组件
*/
<template>
    <input type='file' @change="changeUrl" />
</template>
<script>
export default {
    methods: {
        changeUrl(e) {
            this.$emit('changeUrl', e.currentTarget.files[0].path)
        }
    }
}
</script>

/*
    父组件
*/
<template>
    <FormItem label="上传营业执照" prop="businessLicence">
        <uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
    </FormItem>
</template>
<script>
export default {
    methods: {
        getUrl(path) {
            //这个就是你要的path,并且会双向绑定
        }
    }
}
</script>

//父组件
getUrl(path1，path2) {
console.log(path1,path2)
}