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 上下滚动广告
Jun 17 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 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日历制作代码分享
2014/01/20 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
php中final关键字用法分析
2016/12/07 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
python实现一组典型数据格式转换
2018/12/15 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python绘图模块之利用turtle画图
2021/02/12 Python
个人对照检查材料
2014/02/12 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js