解决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实现下拉菜单效果的代码
Jul 25 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python之os操作方法(详解)
2017/06/15 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python使用Matlab命令过程解析
2020/06/04 Python
web页面录屏实现
2019/02/12 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
教师党员承诺书
2014/03/25 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
婚庆主持词大全
2015/06/30 职场文书
高中政治教师教学反思
2016/02/23 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
python 实现体质指数BMI计算
2021/05/26 Python
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle