解决vue组件props传值对象获取不到的问题


Posted in Javascript onJune 06, 2019

先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的**

personal
console

以下为原代码

1、home.vue(父组件)--personal是被传的参数

<!--子组件-->
<form-picker class="form-picker"
 :personal="personal"
>
</form-picker>
export default {
  data(){
    return{
      personal:{
        state:'',////判断是修改状态,还是新增状态 add/edit
        data:[]
      }
    }
  },
  mounted(){
   this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>{
     this.personal.data = res.data.data //这里给personal对象赋值接口传来的数据
    })
  },
}

2、formPicker (子组件) --接收personal

export default {
  props:['active','personal'],
  mounted(){
    console.log(149,this.personal)
    console.log(150,this.personal.state)
  }
}

运行结果

明明149行有 state 值,150行输出却没有了,是不是超级奇怪

后面经过大佬的讲解,其实浏览器console.log也是应该没有的

所以,其实我们子组件一开始根本就没有取到这个personal这个对象。

3、解决方法--使用watch

父组件

export default {
  data(){
    return{
      personal:{
        state:'',////判断是修改状态,还是新增状态 add/edit
        data:[]
      }
    }
  },
  mounted(){
   this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>{
     //this.personal.data = res.data.data //这里给personal对象赋值接口传来的数据
     //使用以下方法重新赋值,上面方法watch监听不到,具体什么原因,我也不清楚,知道的告知我!谢谢
     this.personal = {
      data: res.data.data,
      state: 'edit'
     }
    })
  },
}

接下来子组件就能 watch 到 personal 了 子组件

watch:{
   personal(newValue,oldValue){
    console.log(181,newValue) 
   },
/** 输出
    {
      data: res.data.data,
      state: 'edit'
     }
**/
  }

总结

以上所述是小编给大家介绍的解决vue组件props传值对象获取不到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 #Javascript
vue 插件的方法代码详解
Jun 06 #Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
node.js的http.createServer过程深入解析
Jun 06 #Javascript
vue中keep-alive组件的入门使用教程
Jun 06 #Javascript
vue2配置scss的方法步骤
Jun 06 #Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 #Javascript
You might like
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python中os.path用法分析
2015/01/15 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python跳出双层for循环的解决方法
2019/06/24 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
.net笔试题
2014/03/03 面试题
远程调用的原理
2014/07/05 面试题
什么是方法的重载
2013/06/24 面试题
记帐员岗位责任制
2014/02/08 职场文书
目标责任书格式
2014/07/28 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
会计岗位职责范本
2015/04/02 职场文书
导游词之清晏园
2019/11/22 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python