Vue---父组件与子组件

首先，生命周期是什么？

Vue在创建、运行再到销毁过程中，会遇到各种各样的事件，这些事件统称为生命周期

生命周期分为：

1、初始化之前：beforeCreate(){

console.log(this.message)//undefined

} data和methods的数据还有没初始化，拿不到里面的数据

作用：页面重定向

2、初始化之后：created (){

console.log(this.message)

this.message='hi'

}data和methods的数据已经初始化，第一个操作date和methods数据的生命周期

作用：数据初始化，接口请求

3、虚拟DOM挂载：beforeMount(){}

4、真实DOM挂载：mounted(){}第一个可以操作DOM的生命周期

5、更新之前：brforeUpdate(){}可以执行0 次或更多次（页面中的数据是旧的，date里面的数据是新的）

6、更新之后：updated(){}可以执行0 次或更多次（页面中的数据和date里面的数据都是新的）

7、销毁之前：beforeDestroy(){}清空定时器和页面监听

8、销毁之后：destroyed(){}

其次，什么是父组件和子组件

父组件：在webstorm里面，写在views里面的.vue页面叫父组件

子组件：在webstorm里面，写在components里面的.vue页面叫子组件

父子组件传参

父传子：

1、在父组件的子标签中自定义一个属性

2、在子组件中用props接受，设置默认值

子传父：

1、在父组件的子标签中自定义一个事件，方法里有一个参数用来接收子组件的传值

2、在子组件中有一个this.$emit('自定义事件的名字'，传递的数据)

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

父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载

加载渲染过程

父组件：beforeCreate -> 父组件：created -> 父组件：beforeMount -> 子组件：beforeCreate -> 子组件：created -> 子组件：beforeMount -> 子组件：mounted -> 父组件：mounted->父组件：beforeUpdate->子组件：beforeUpdate->子组件：updated->父组件：updated->父beforeDestroy->子组件：beforeDestroy->子组件：destroyed->父组件：destroyed

销毁过程

父组件先做销毁准备，然后子组件开始完整销毁，然后父组件完整销毁

父组件：peforeDestroy->子组件：peforeDestroy->子​​​​组件：destroyed->父组件：destroyed