组件,是一个具有一定功能,且不同组件间功能相对独立的模块。高内聚、低耦合。
 
开发可复用性的组件应遵循以下原则:
 
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. spark 学习网站和资料

    spark 官网首页 https://spark.apache.org/ spark 官网文档 spark scala API 文档 https://spark.apache.org/docs/lat ...

  2. centos双网卡配置

    centos双网卡问题,一个网卡配置局域网,一个网卡配置公网,如果内网访问自动走eth1,如果外网访问自动走eth2. 需要配置路由吗? 1. 首先查看机器是否是双网卡,命令如下: lspci | g ...

  3. qbzt day6 上午

    还是合并石子,但是这次可以任意两个合并,并且求最大异或和 f[s]表示把s所对应的的石子合并为一堆的最小代价 最后求f[2^n-1] 怎么转移? 最后一次也是把两堆合并成一堆,但是会有很多情况,可以枚 ...

  4. springAOP基于注解的使用方法和实现原理

     springAOP即面向切面编程,可以在方法执行过程中动态的织入增强逻辑,其使用步骤为: 1. 导入aop模块的jar包,或在maven中添加依赖:spring-aspects 2. 定义目标类和目 ...

  5. 测开之路八十七:HTML之a标签的用法

    初始化的HTML结构为,只需要在body里面加网页的标签和要显示的内容即可 <!DOCTYPE html><html lang="en"><head& ...

  6. 几个模拟OLE事件注册、调用的宏

    最近遇到一个要求,将原来的OCX控件,替换成直接的DLL调用. 遇到OLE的事件回调,写了三个宏,用于简化代码 #define OLE_ENVENT_IN_CLASS_ONE(event_name, ...

  7. Fiddler代理抓取的接口的服务器返回出现"Response body is encoded. Click to decode. "

    参考与:https://blog.csdn.net/wsbl52006/article/details/53256705 解决办法: Rules > Remove All Encodings 勾 ...

  8. 【ABAP系列】SAP ABAP中使用for all entries in小结

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP中使用for a ...

  9. gdi+ 中发生一般性错误

    1.检查文件夹权限 2.保存的文件已存在并因某种原因被锁定. 3.文件夹路径不存在

  10. VC调试方法大全

    VC调试方法大全 一.调试基础 调试快捷键 F5:  开始调试 Shift+F5: 停止调试 F10:   调试到下一句,这里是单步跟踪 F11:   调试到下一句,跟进函数内部 Shift+F11: ...