父子通信，子组件通过props获取不到父组件传过来的值的原因以及解决办法，简单易懂

1.问题和原因

• 之前开发的时候，经常遇到父子组件传值，子组件通过props接收，有点页面能接收到，有的页面就接收不到的情况，当时还不知道具体什么原因，后来经过了一些研究，才了解其中原理
• 首先我们需要知道两个知识点
  • 1.vue中的生命周期（vue2和vue3）
  • 2.父子组件嵌套时，生命周期加载顺序
  • 
  • 
• 知道这两个必要知识点后，我们就开始分析多种情况下，父子组件传值是否能拿到

1.1父子组件直接嵌套，子组件直接展示

• 
• 这样的话，二者是马上就开始走生命周期的，如果子组件想接收到props传过来的数据，那么在vue2中，父组件给dataObject赋值的时间，就必须是在beforeCreate，created，beforeMount之间，或者直接定义在data中，在vue3中，就必须写在setup和onBeforeMount中
• 举例（vue3写法）
  • 1.写在onBeforeMount
  • 
  • 
  • 
  • 2.写在onMounted
  • 
  • 
  • 

1.2子组件是弹框，父组件点击弹框，子组件才展示

• 
• 这个时候子组件不是一开始就展示的，所以会先走完父组件的生命周期，然后点击弹框展示子组件的时候子组件的生命周期才会展示，所以在父组件的created或者mounted的生命周期里给dataObject赋值都可以，子组件通过props都能拿到
• 

解决办法

• 1.上面的就是获取不到的原因，也是第一种解决办法，就是写在正确的生命周期里

• 2.但是有的时候，我们在父组件里获取数据必须在mounted里，不能通过修改写在不同生命周期来解决，也有其他的解决办法

  • 2.2 在子组件里增加一个定时器获取数据，这样父组件的生命周期就走完了，子组件就能获取到父组件的数据了
  • 
  • 
  • 
  • 但是这样说是不好的，因为父组件的生命周期走完的时间可能和网速或者电脑速度都有关系，所以定时器时间不好定义，写的太短可能父组件没走完，写的太长页面会有延迟，所以并不推荐这种方案

• 我推荐使用watch来监听props的数据，这样不管父组件的数据什么时候传过来，子组件都能接收到

• vue3写法举例

• 

•