vue 子组件watch监听不到prop的解决


Posted in Javascript onAugust 09, 2020

问题描述

在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时,输出的是默认数据:

vue 子组件watch监听不到prop的解决

输出:

vue 子组件watch监听不到prop的解决

解决方法:

第一种:加上 v-if 来判断数据是佛加载完成了,加载完了再渲染:

<mk-form v-if="formList!=null" :list="formList" :formvalue="formvalue"></mk-form>

第二种:用 setTimeout 来做延迟,但这样的方法不准确,应该视情况使用

其实两种方法都应该视情况来使用。

以上这篇vue 子组件watch监听不到prop的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 #Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 #Javascript
bootstrap实现tab选项卡切换
Aug 09 #Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 #Javascript
js利用iframe实现选项卡效果
Aug 09 #Javascript
解决vue 退出动画无效的问题
Aug 09 #Javascript
在vue中使用console.log无效的解决
Aug 09 #Javascript
You might like
PHP SplObjectStorage使用实例
2015/05/12 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
JQuery 常用操作代码
2010/03/14 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python 异常处理实例详解
2014/03/12 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
教师自我评价范例
2013/09/24 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
储备店长岗位职责
2015/04/14 职场文书
环境卫生整治简报
2015/07/20 职场文书
节水宣传标语口号
2015/12/26 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript