解决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 相关文章推荐
jquery表单验证使用插件formValidator
Nov 10 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
js实现放大镜特效
May 18 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
基于ssm框架实现layui分页效果
Jul 27 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Django开发中的日志输出的方法
2018/07/02 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
公益广告宣传方案
2014/02/28 职场文书
陈欧广告词
2014/03/14 职场文书
会议主持词
2014/03/17 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
领导干部考核评语
2015/01/04 职场文书
获奖感言一句话
2015/07/31 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书