vue父组件传值给子组件收不到

问题描述

在日常开发中，经常会遇到父子组件传值的问题，如果父组件的数据是异步获取的，传递给子组件就会出现在子组件的 mounted 的钩子初始化的情况下接收不到数据的问题

回顾下父子组件的生命周期

加载数据过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父组件 mounted

更新渲染数据过程

父 beforeUpdate->子 beforeUpdate -> 子 updated -> 父 updated

销毁组件过程

父 beforeDestroy -> 子 beforeDestroy -> 子destroyed -> 父 destroyed
其实以上的生命周期可以简单理解，父组件的生命周期都会看看子组件的生命周期有没有走完，子组件的生命周期走完了，才会走到父组件的生命周期

问题分析

我们知道，mounted 的钩子函数默认只会执行一次，但是由于数据是父组件的异步加载的，所以在当子组件执行 mounted 的时候，还没有拿到父组件传递过来的数据，但是又必须打印父组件的 props的值，props是可以等的，所以值可以在页面上渲染出来，但是在控制台会报错 Cannot read property ‘XXX‘ of undefined

解决办法

方法1 使用 v-if 控制子组件的渲染，当父组件的传递到值获取到后再展示，缺点就是这个组件的显示会有些延迟

方法2 子组件中使用 watch 监听父组件传递过来的值的变化

  watch: {
    // 深度监听父组件值变化
    result: {
      handler(newValue) {
        this.result = newValue;
        this.showOrderList();  // 控制数据的赋值
      },
      deep: true,
    }
  }

以上是自己在实际项目开发中遇到的问题的解决方案记录，如果觉得对你有用点个赞吧~~~