一、具体使用场景描述:父组件里引入了一个文章封面(图片上传)的组件,修改操作时父组件需把封面存储路径及时传给子组件进行显示,使用的是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;
// }
},
}