vue项目下props传进去的数据,生命周期勾子函数包括watch不触发的解决办法 @TOC
遇到的问题
在深层props过程中,props的数据传到了目标文件 但却没有触发数据更新及页面更新; watch代码如下:
watch: {
uploaConfig(newVal,oldVal){
if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
this.moreList = newVal.moreList
}
}
},
复制代码
vue-devToola数据传递结果如下
方案解决过程一
考虑到使用了对象传递 watch可能无法检测到深层key属性变化,代码改成如下:
watch: {
'uploaConfig.moreList': {
handler (newVal) {
if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
this.moreList = newVal.moreList
}
},
deep: true
}
},
复制代码
结果显而易见 还是不行;
方案解决过程二
查阅: vue官方文档.得知如果是想watch检测到值变化并且立刻使用则需要加上 immediate: true,
watch: {
'uploaConfig.moreList': {
handler (newVal) {
if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
this.moreList = newVal.moreList
}
},
deep: true,
immediate: true,
}
}
复制代码
最后博主问题终于得到解决了
总结:
出现问题尽量先找官网 首先确定是自己没有了解到官方api的正确使用或者是一些特定解决方案,如若对您有帮助,麻烦点个赞吧~
感谢~
谢谢大家 麻烦给个关注 ^ _ ^