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

父组件传参，通常分为两种状况：

一、父组中的原始数据 (即定义在父组件data中的原始数据),传输给子组件使用，子组件在生命周期中是能够获取并使用的。

二、父组件传给子组件的参数，是从接口中获取到的， 可能遇到的问题就是，若是在组件的created或mounted生命周期中定义要给方法，在子组件渲染时就获取父组件的传值，并进行新数据的获取并进行页面渲染，但此时父组件请求的数据可能尚未彻底返回，子组件就开始使用此数据，该数据天然不存在，打印在控制台中的父组件穿给子组件的参数为undefined，所以就会出现父组件传参不及时，子组件使用数据较早，形成数据没法使用。

解决改问题的方法：

一、在子组件的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)
            }
        }
    }
    }

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

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

代码：

export default {
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  watch: {
    // 监听到父组件传递过来的数据后，加工一下，
    // 存到data中去，然后在页面上使用
    msg(newnew, oldold) {
      console.log("监听", newnew, oldold);
      this.editMsg = "---" + newnew + "---";
    },
  },
  data() {
    return {
      editMsg: "",
    };
  },
};