[TOC] >[success] # 组件种类 ~~~ 1.这个问题的来源是我第一使用vue-cli 搭建项目的时候产生的,某天公司一个 开发人员问我,我的项目结构规划的时候,我提到了视图组件,公司同事立刻 反问我视图组件和组件有什么区别 ,当时我懵了一段时间。根据cli为我们规 划的项目目录,我们也可以发现官方很明确的将组价分别放到了'views' 文件 件中和'components' 文件中,但两者都是组件区别在哪里? 2.这篇文章是根据'Aresn' 大神在掘金发布的文章,我个人理解。重新再次整 理的内容,如果你的资金允许特别推荐购买这个大神的小册,准确的说我的 vue除了官方文档,和一些视频教程外,让我进步最快的就是'iview' 几位作者将自己vue文章分享出来,让我这个刚刚接触vue的人可以进步飞快, 在这里还要强推iview另一个作者'lison' 大神 ~~~ <a href='https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5bc844166fb9a05cf52af65f'>文章来自AresnTalkingData 前端架构师,iView 作者 发布在掘金网小册中内容启发整理</a> >[danger] ##### 组件种类 ~~~ 1.简单的说vue项目中的组件分为三种'视图组件','基础组件','业务组件' 2.什么是视图组件:由 vue-router 产生的每个页面主要承载当前页面的 HTML 结构,会包含数据获取、数据整理、数据可视化等常规业务。整个文 件相对较大,但一般不会有 props 选项和 自定义事件,因为它作为路由的渲 染,不会被复用,因此也不会对外提供接口。这类组件主要是根据还原设计 稿,完成需求 2.基础组件:不包含业务,独立、如日期选择器、模态框等。这类组件作为项 目的基础控件,会被大量使用,因此组件的 API 进行过高强度的抽象,可以 通过不同配置实现不同的功能,开发难度要高于第一类组件,因为它的侧重点 是 API 的设计、兼容性、性能、以及复杂的功能。这类组件对 JavaScript 的编程能力有一定要求 3.业务组件:在业务中被多个页面复用的,它与独立组件的区别是,业务组件 只在当前项目中会用到,不具有通用性,而且会包含一些业务,比如数据请 求;而独立组件不含业务,在任何项目中都可以使用,功能单一,比如一个 具有数据校验功能的输入框。也可以对现阶段的一些流行js库进行二次封装 成vue组件 ~~~ >[danger] ##### 组件的组成 [文章参考即刻时间一点资讯开发唐金州](https://time.geekbang.org/course/detail/163-86426) ~~~ 1.随着组件的深入,大体可以发现组件是属性、事件、插槽的组成体,属性其实 vue详细划分了三个部分,分别是自定义属性'props'、'原生属性attrs'、'特殊属性class/style' 2.具体案例可以看下一章节 ~~~ ![](https://box.kancloud.cn/7dbc9331847059b10824b6ba757ec228_1635x920.png)