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 相关文章推荐
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
javascript数组去重小结
Mar 07 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
AngularJS中的promise用法分析
May 19 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
Vue路由权限控制解析
Nov 09 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 学习路线与时间表
2010/02/21 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python中range()与xrange()用法分析
2016/09/21 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python 多线程串行和并行的实例
2019/02/22 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python3多线程知识点总结
2019/09/26 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
中学教师实习自我鉴定
2013/09/28 职场文书
研究生自荐信
2013/10/09 职场文书
应届生求职信范文
2014/05/26 职场文书
劳动竞赛口号
2014/06/16 职场文书
新手上路标语
2014/06/20 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2015年试用期工作总结
2014/12/12 职场文书
业务员辞职信范文
2015/03/02 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android
Redis基本数据类型Set常用操作命令
2022/06/01 Redis