vue父组件传参给子组件，子组件中获取不到。

在项目中，遇到vue父子组件的传参问题，父组件传参给子组件，子组件在created和mounted等生命周期中获取不到，也无法使用父组件传递过来的参数。

两种传参方式

1、父组中的原始数据
即定义在父组件data中的原始数据，传输给子组件使用，子组件在生命周期中是可以获取并使用的。

2、父组件传给子组件的参数，是从接口中获取到的，
可能遇到的问题就是，如果在组件的created或mounted生命周期中定义要给方法，在子组件渲染时就获取父组件的传值，并进行新数据的获取并进行页面渲染，但此时父组件请求的数据可能还没有完全返回，子组件就开始使用此数据，该数据自然不存在。

打印在控制台中的父组件穿给子组件的参数为undefined，因此就会出现父组件传参不及时，子组件使用数据较早，造成数据无法使用。

解决改问题的方法

1、setTimeout 定时器

在子组件的 created 或者 mounted 等较早执行的生命周期中使用 setTimeout 定时器，来延缓执行生命周期中的函数， 使父组件从接口中获取的参数，有充分的时间传输，在子组件使用时，等待父组件的参数到来再执行，就不会出现拿不到父组件的传参问题了。

//----------------------------子组件--------------------------------
export default {
    props:['fatherData'],
    data(){
        return {
            
        }
    },
    created(){
        this.setTime() // 延时1.5秒调用方法，等待父组件的传参返回
    },
    methods:{
        setTime(){ // 定时器，延时调用方法
          let win = this
          setTimeout(function(){
              win.getData() // 获取数据
          },1500)  
        },
        getData(){
            // 使用父组件传过来的数据，进行新的请求
            this.$api.getData(this.fatherData).then(res=>{
                console.log(res)
            }
        }
    }
    }
    // 该方法虽然可以解决上述问题，但延时调用影响了页面的响应速度，
    // 不是一个很好的解决办法(不推荐)

Tips：

该方法虽然可以解决上述问题，但延时调用影响了页面的响应速度，
不是一个很好的解决办法(不推荐)

2、另一种方法为watch侦听

使用vue的监听方法，监听父组件的传参，一旦侦听到数据返回，便立即调用子组件的方法进行数据获取，相对于第一种方法，更加灵活和快速。

  watch: {
      //监听参数中的 props.markerLists 变化
      'props.markerLists':{
          handler(newValue, oldValue){
            //console.log(newValue);
            this.init();
          },
          // 深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。
          // 因此请只在必要时才使用它，并且要留意性能。
          deep: true,
       }
  }

其他文章发布

https://www.wooc.top/#/home