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 alert消息换行的方法
Aug 07 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
详解CocosCreator项目结构机制
Apr 14 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
几种显示数据的方法的比较
2006/10/09 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
javascript 写类方式之五
2009/07/05 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
python基础教程之字典操作详解
2014/03/25 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
Python单元测试与测试用例简析
2019/11/09 Python
Pytorch之contiguous的用法
2019/12/31 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
工作保证书范文
2014/04/29 职场文书
小学生节水倡议书
2015/04/29 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
赞美教师的句子
2019/09/02 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
mysql sql常用语句大全
2022/06/21 MySQL