组件,是一个具有一定功能,且不同组件间功能相对独立的模块。高内聚、低耦合。
 
开发可复用性的组件应遵循以下原则:
 
1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名。
2.数据扁平化:定义组件接口时,尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个简单类型的数据。这样做有下列几点好处:
   (1) 组件接口清晰。(2) props 校验方便。(3) 当服务端返回的对象中的 key 名称与组件接口不一样时,不需要重新构造一个对象。
扁平化的 props 能让我们更直观地理解组件的接口。
3.可复用组件只实现 UI 相关的功能,即展示、交互、动画,如何获取数据跟它无关,因此不要在组件内部去获取数据。
4.可复用组件应尽量减少对外部条件的依赖。
5.组件在功能独立的前提下应该尽量简单,越简单的组件可复用性越强。
6.组件应具有一定的容错性。

vue开发可复用组件的更多相关文章

  1. Vue.js的复用组件开发流程

    本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...

  2. 打造 Vue.js 可复用组件

    Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...

  3. 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)

    (本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...

  4. 使用 Vue 开发 scrollbar 滚动条组件

    Vue 应该说是很火的一款前端库了,和 React 一样的高热度,今天就来用它写一个轻量的滚动条组件: 知识储备:要开发滚动条组件,需要知道知识点是如何计算滚动条的大小和位置,还有一个问题是如何监听容 ...

  5. 【vue开发】 父组件传值给子组件时 ,watch props 监听不到解决方案

    解决方案: watch:{ data:{ immediate:true, handler:function(){ } }} 示例:  

  6. Vue开发复用组件的基本思想

    可复用组件的价值在于高复用性,它更能将一个项目往高内聚.低耦合的方向发展. 1.组件命名------按组件功能命名: 2.组件内容------明确组件需要实现什么样的功能: 3.组件体积------越 ...

  7. 基于Vue全家桶开发的前端组件管理平台

    项目背景 项目背景是外包类建站公司里,设计环节沉淀了大量可复用组件,设计师往往只需要微调组件就拼凑出页面,交付给前端,理论上这些组件在前端也可以复用,但实际上前端每次都要重新实现整个页面,浪费很多人力 ...

  8. Vue企业级优雅实战04-组件开发01-SVG图标组件

    (后续的文章 公众号会提前一周更新,欢迎关注文末的微信公众号:程序员搞艺术) 预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy- ...

  9. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

随机推荐

  1. ELK实时日志分析平台环境部署--完整记录(ElasticSearch+Logstash+Kibana )

    https://blog.csdn.net/oLevin/article/details/81020794

  2. vue引入静态js文件

    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...

  3. (转)oracle触发器使用:after insert 与before insert的简单使用注意

    本文转载自:http://blog.csdn.net/kuangfengbuyi/article/details/41446125 创建触发器时,触发器类型为after insert , 在begin ...

  4. linux基本目录

    / 根目录: dev : 存放抽象硬件 ib : 存放系统库文件 sbin : 存放特权级二进制文件 var : 存放经常变化的文件 home : 普通用户目录 etc : 存放配置文件目录 /etc ...

  5. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_1_字符串概述和特点

    在api中查找 java.lang包里面的不用引用

  6. unittest框架扩展(基于代码驱动)自动化-下

    一.数据驱动/代码驱动优缺点: 使用数据驱动的好处:- 代码复用率高.同一测试逻辑编写一次,可以被多条测试数据复用,提高了测试代码的复用率,同时可以提高测试脚本的编写效率.- 异常排查效率高.测试框架 ...

  7. delphi 访问 protected 属性 哈哈

    unit Unit39; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...

  8. 【ABAP系列】SAP ABAP ALV里日期类型的F4帮助

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP ALV里日期类 ...

  9. 安全运维 - Linux系统攻击应急响应

    Linux 应急相应 - 总纲 应急准备: 制定应急策略 组建应急团队 其他应急资源 安全事件处理: 痕迹数据获取 分析.锁定攻击源删除可疑账号关闭异常进程.端口禁用相应异常开机启动项删除异常定时任务 ...

  10. ceph部署-常用命令

    常用命令:1.ceph healthceph -s 2.ceph osd treeceph osd lspoolsceph osd pool [poolname] rbd pg_numceph osd ...