vue 子组件watch监听不到prop的解决
更新时间：2020年08月09日 10:20:34 作者：Robbie丨Yang
这篇文章主要介绍了vue 子组件watch监听不到prop的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
问题描述
在vue项目中，父组件通过prop给子组件传值时，如果prop值是从服务器端获取，则父组件可能会传给子组件一个默认值(服务端数据还未及时获取)，那么，我们就需要实时watch这个prop值，一旦prop值有更新，将立即通知子组件更新。
解决方案
watch: {
levelDetail: {
immediate: true, // 很重要！！！
handler (val) {
this.levelPersonal = !val ? {} : val
// console.log('action Value:', val, this.levelPersonal)
}
}
},
官方文档
vue-watch 参考文档
补充知识：vue父组件props参数太大时子组件created取不到数据-解决方法
问题：
父组件调用子组件：
<mk-form :list="formList" :formvalue="formvalue"></mk-form>
其中的formList数据是用ajax调用的，数据比较大，应该有些延迟
子组件的created中调用props时，输出的是默认数据：
输出：
解决方法：
第一种：加上 v-if 来判断数据是佛加载完成了，加载完了再渲染：
<mk-form v-if="formList!=null" :list="formList" :formvalue="formvalue"></mk-form>
第二种：用 setTimeout 来做延迟，但这样的方法不准确，应该视情况使用
其实两种方法都应该视情况来使用。
以上这篇vue 子组件watch监听不到prop的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vue3从0搭建Vite打包组件库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
element-ui中的select,checkbox等组件的change方法的回调函数只有当前选择的val,如果想再传入自定义参数怎么办,本文给大家分享select的change方法如何传递多个参数,感兴趣的朋友一起看看吧2024-02-02
element-ui中el-upload多文件一次性上传的实现
这篇文章主要介绍了element-ui中el-upload多文件一次性上传的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
在 Vue.js 开发中,watch 是一个强大的工具,用于监听数据的变化并执行相应的操作,然而,许多开发者在使用 watch 时会遇到数据变化未被正确监听的问题,这可能导致程序逻辑错误或视图更新失败,本文将探讨这些问题的常见原因,并提供相应的解决方案,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了vue中使用ts配置的具体步骤，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了Vue使用localStorage存储数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
在 Vue 中，一些简单的功能，我们可以直接定义为全局方法，然后挂到 Vue 上就能使用了，这篇文章主要介绍了Vue3 中自定义插件的实现,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue3使用element-plus组件不显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了使用vue实现自定义多选与单选的答题功能,vue组件中在表单方面提供了一个v-model指令，非常好用，具体实现过程大家跟随脚本之家小编一起看看吧2018-07-07
这篇文章主要介绍了Vue中使用Datav如何完成大屏基本布局问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
最新评论