vue父子组件

1.1. 组件的概念

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

1.2. 组件化和模块化的不同：

• 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
• 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

1.3. 父子组件传参

1.3.1. 父传子

• 在父组件的子标签中自定义一个属性
• 在子组件中用props接收，设置默认值。

1.4.2. 子传父

• 在父组件的子标签中自定义一个事件，
• 方法里面有一个参数用来接收子组件的传值，
• 在子组件中this.$emit('自定义事件的名字'，传递的数据)

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

执行顺序：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父created -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。

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

组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载。

父beforeCreate-> 父created -> 子beforeCreate-> 子created -> 子mounted -> 父mounted

子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。

仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外往内顺序执行，所以父子组件传递接口数据的解决方案是：

在created中发起请求获取数据，依次在子组件的created或者mounted中会接收到这个数据。

加载渲染过程

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

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

常用钩子简易版

父created->子created->子mounted->父mounted