vue父子组件生命周期执行顺序 

vue父子组件生命周期执行顺序



 

1.首先执行的是父组件的beforeCreate

 

2.执行的是父组件的created周期

 

3.执行的是父组件的beforeMount周期

 

4.执行的是子组件的beforeCreate周期

 

5.执行的是子组件的created周期

 

6.执行的是子组件的beforeMount周期

 

7.执行的是子组件的mounted周期

 

8.执行的是父组件的mounted周期

 

总结：

 

执行的先后顺序为 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 。

 

 

父组件传值给子组件（异步）钩子函数

 

 

一、父子组件异步传值的坑

子组件的生命周期只会执行一次，但是当子组件渲染的时候父组件的数据还没接受完就会造成子组件没有任何

内容渲染。

 

二、解决父子组件异步传值的方法

1. 给子组件添加渲染条件，使用v-if，当父组件数据接收完毕后在渲染子组件。

2. 在子组件中添加watch监听，当父组件数据传输过来时，改变原有的默认数据，重新渲染页面。