Vue中Props方式父组件给子组件进行传值，Watch的普通监听解决不了值刷新不及时的问题，可以换Watch深度监听试试

一、具体使用场景描述：父组件里引入了一个文章封面（图片上传）的组件，修改操作时父组件需把封面存储路径及时传给子组件进行显示，使用的是Props方式父组件给子组件进行传值，子组件使用Watch普通监听还是不能很及时刷新值，使用Watch深度监听解决问题。

二、相关代码如下：

A.父组件核心代码：

<!--父组件引入子组件 cover为父组件需要向子组件传的值-->
<photoUpload  :cover="cover" />

import photoUpload from "./photoUpload";

export default {
    components: {
        photoUpload
    },
    data() {
        return {
          //封面
          cover: undefined,
        };
    }
}

B.子组件核心代码：

<!--根据图片路径显示图片的标签-->
<img v-bind:src="imgUrl ? imgUrl: defultImgUrl"  title="点击上传图片"/>

export default {
    //子组件props传值标志
    props: {
        //值的名称和父组件保持一致
        cover: {
          type: String
        }
    },
    data() {
        return {
          //默认图片url
          defultImgUrl: require("@/assets/image/暂无缩略图.jpg"),
          //图片显示路径
          imgUrl: ''
        };
    },
    //watch监听方法
    watch: {
        //深度监听（解决了值刷新不及时的问题）
        cover: {
          handler:function(newval, oldVal) {
            this.imgUrl = newval;
          },
          immediate: true
        },
        // //简单监听（不能解决值刷新不及时的问题）
        // cover(newval, oldVal) {
        //   this.imgUrl = val;
        // }
    },
}