父子组件传值时，子组件无法获取父子间传的值

父子组件传值时，子组件无法获取父子间传的值

        问题描述

        原因分析

        解决方法

问题描述：

        在父子组件传值时，当父组件请求接口获取数据后，再传值给子组件，而子组件无法获取到父组件所传的值。

父组件：

<template>
    <view>
	    <label class="font-16">图片：</label>
	    <my-image-upload @input="input" :value="imgeList" />
    </view>
</template>
<script>
    import myImageUpload from '@/components/my-componets/my-image-upload.vue'
    import apiReport from '@/api/report.js'
    export default {
        data(){
            return{
                imgeList: '',
				imgList:''
            }
        },
        mounted(){
            if (this.$Route.query.userId) {
				this.form.id = this.$Route.query.userId
				apiReport.getReport(this.form.id).then(res => {
					this.imgeList = res.data.data.photo
				})
			}
        },
        methods:{
            input(res) {
				this.imgList = res;
			}
        }
    }
</script>

子组件：

props: {
	value: {
		type: String,
		default: ''
	}
},
mounted：function(){
    if(this.value != null && this.value != undefined && this.value != ''){
		var images = this.value.split(',')
	}
}

原因分析：

因为父组件中要传的值是通过发送axios请求回来的，请求这个过程是需要耗时的，但是子组件的渲染速度要快于父组件的请求速度，所以当子组件渲染完毕的时候，父组件的数据依旧没请求回来，而子组件中mounted这样的生命钩子函数只会执行一次，所以props中的value并没有获取到父组件所传的值。

解决方法：

使用watch监听value值得变化

props: {
	value: {
		type: String,
		default: ''
	}
},
watch：{
    value:function(){
        if(this.value != null && this.value != undefined && this.value != ''){
		    var images = this.value.split(',')
	    }
    }
}