vue中子组件的created、mounted钩子中获取不到props中的值问题

我会带着你远行 2023-02-13 00:23 464阅读 0赞

# **1.问题描述：** #

写了一个侧边栏导航组件，接收父组件传过来的对象数据，然后渲染导航栏以及所导航的内容。

siderValue是左边导航栏的数据

selectItems是右边需要显示的数据

props: {
        siderValue: Array,
        selectItems: Object
    },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70][]

created() { 
    this.selectItemsDate = this.selectItems; 
    }

取到数据再做处理，

但是由于selectItems的值并不是固定的，而是动态获取的，这种情况下，会发现 created 中是取不到 selectItems的，或者取到的一直是默认值。

# 2.分析 #

出现这种情况的原因, 因为父组件中的要就要传递的  props  属性 是通过 发生ajax请求回来的, 请求的这个过程是需要时间的，但是子组件的渲染要快于ajax请求过程，所以此时  created 、 mounted  这样的只会执行一次的生命周期钩子，已经执行了，但是 props 还没有流进来（子组件），所以只能拿到默认值。

# 3.解决办法 #

使用 watch 监听

由于是监听的对象（或者数组），

加上immediate:true 和 deep:true//deep

watch: { //监听父组件传过来的selectItems 
        selectItems: { 
            handler(newVal,oldVal){ 
                this.selectItemsDate = newVal; 
                if(newVal) {//如果数据变化则重新创建数据用于渲染 
                this.itemsCreat();//处理数据 
                } 
            }, 
            immediate:true,//immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的                    
                         handler方法，如果为 false，不会在绑定的时候就执行。 
            deep:true//deep，默认值是 false，代表是否深度监听。 
        } 
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200526181452178.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3,size_16,color_FFFFFF,t_70