解决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获取某年某月的最后一天附截图
Jun 23 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
Javascript设计模式之原型模式详细
Oct 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
德生H-501的评价与改造
2021/03/02 无线电
php自定义函数截取汉字长度
2014/05/15 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
一篇不错的Python入门教程
2007/02/08 Python
新手该如何学python怎么学好python?
2008/10/07 Python
Python的print用法示例
2014/02/11 Python
简单介绍Python中的floor()方法
2015/05/15 Python
python下MySQLdb用法实例分析
2015/06/08 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
python 字典的打印实现
2019/09/26 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工作态度怎么写
2015/06/25 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js