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