Vue的组件开发

前言

了解常见组件的开发思路，项目中有很多二次封装的组件，大体设计思路上都是想通的，当遇到组件相关的问题时，可以直接查看相关组件的源码，从而快速定位问题。

1.组件特性

• 从不同角度分析组件的特性

  构成	易变性	影响因素
  结构（视觉）	不易变	内容结构、布局类样式
  结构（内容）	较易变	生成 html 的 js 库/框架的源码、平台限定的视图结构描述语言
  表现（主题风格）	很易变	GUI 设计人员的审美和想法、非布局类样式、图标与图片
  行为（交互逻辑）	不易变	交互设计人员的想法
  行为（业务逻辑）	很易变	业务规则

• 组件封装主要就是为了复用相关代码，所以需要重点考虑不易变的部分

  易变等级	影响因素
  不易变	交互方式
  较易变	源码语法
  很易变	业务和人

2.组件分类

• 原子性
  • 原子组件：不可再分的 ui 组件（按钮、图标、分割线）
  • 复合组件：由一个以上的原子组件构成（菜单、选项卡、对话框）
• 通用性
  • 通用组件：一般作为公共组件维护
  • 专用组件
• 功能性

  组件类别	案例组件
  一.命令输入	按钮组件、下拉菜单组件
  二.数据输入	表单组件、输入框组件、单/复选框组件、级联选择组件、日期拾取器组件、动态渲染组件、动态组件
  三.数据输出	树组件、列表组件、表格组件
  四.信息展示	图标组件、加载状态组件、工具提示组件
  五.容器	手风琴组件、面板组件、选项卡组件、字段集组件
  六.导航	导航菜单组件、面包屑组件、超链接组件
  七.特殊窗口	对话框组件、警告提示组件

3.组件开发

编写一个 Vue.js 组件，最重要的是设计好它的接口，一个 Vue.js 组件的接口来自三个部分：props、slots、events。

4.环境搭建

5.组件发布

总结

通过对前端组件的分析，需要重点关注组件中易变性对组件封装的影响，它会对组件的可复用性、可扩展性产生很大影响