解决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 相关文章推荐
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
javascript常用函数(2)
Nov 05 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
js仿淘宝放大镜效果
Dec 28 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JS的get和set使用示例
2014/02/20 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python爬虫常用的模块分析
2014/08/29 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
公司离职证明样本
2014/09/13 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
python实现高效的遗传算法
2021/04/07 Python
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python