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

栏目: JavaScript · 发布时间: 6年前

内容简介:先说问题,父组件利用props向子组件传值,浏览器父组件接下来子组件就能

先说问题,父组件利用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)
    }
}
复制代码

运行结果

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

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

  • 后面经过大佬的讲解,其实浏览器console.log也是应该没有的
    vue组件props传值,对象获取不到的问题
  • 所以,其实我们子组件一开始根本就没有取到这个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'
          }
        })
    },
}
复制代码

接下来子组件就能 watchpersonal 了 子组件

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Probability and Computing

Probability and Computing

Michael Mitzenmacher、Eli Upfal / Cambridge University Press / 2005-01-31 / USD 66.00

Assuming only an elementary background in discrete mathematics, this textbook is an excellent introduction to the probabilistic techniques and paradigms used in the development of probabilistic algori......一起来看看 《Probability and Computing》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器