组件化是Vue的精髓,Vue应用就是由一个个组件构成的。
1.定义
组件是可复用的 Vue 实例
,准确讲它们是VueComponent的实例,继承自Vue。
2.优点
可以增加代码的复用性
、可维护性
和可测试性
。提高开发效率, 方便重复使用,简化调试步骤,提升整个项目的可维护性,便于协同开发,是高内聚、低耦合代码的实践。
3.使用场景
- 通用组件:实现最基本的功能,具有
通用性
和复用性
。例如按钮组件、布局组件等 - 业务组件:完成具体的业务,具有
一定的复用性
。例如登录、轮播图、提示信息等 - 页面组件:组织应用各部分的
独立
内容,需要根据条件切换页面内容。例如列表页、详情页
4.如何使用组件
- 注册:
Vue.component()
,component
选项,单文件 - 通信:
props
、$emit('')/$on
、provide/inject
,$children/$parent/$root/$attrs/$listeners
- 内容分发:
<slot>
、<template>
、v-slot
5.组件的本质
vue中的组件经过如下过程:
组件配置 => VueComponent实例 => render() => Virtual Dom => Dom
所以组件的本质是产生虚拟Dom