组件,是一个具有一定功能,且不同组件间功能相对独立的模块。高内聚、低耦合。
 
开发可复用性的组件应遵循以下原则:
 
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. SQL Server函数大全(三)----Union与Union All的区别

    如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来. union和unio ...

  2. React-Native 之 GD (十七)小时风云榜按钮处理

    小时风云榜按钮处理 在服务器返回给我们的 json 数据中,提供了 hasnexthour 字段,当这个字段返回为 1 的时候,表示后面还有内容,按钮可以点击,否则不能点击,按照这个思路,我们就来完成 ...

  3. Git 创建版本库并实现本地上传数据到GitHub库

    版本库又叫做仓库,其实也是一个目录,这个目录里的所有文件都是被Git管理着,对每个文件的修改,删除,Git都会进行记录,方便我们对其进行跟踪. 因为本地是window环境,我们先从官网下载好windo ...

  4. ASM磁盘组删除磁盘

    ASM磁盘组删除磁盘 [oracle@dbserver1 ~]$ su - gridsqlplus / as sysasmConnected.SQL> alter diskgroup data ...

  5. loj#6487 基础 FFT 练习题

    分析 仔细观察a[i],b[i]的数据范围 于是我们转为枚举所有a[i],b[i]的值 然后暴力即可 代码 #include<bits/stdc++.h> using namespace ...

  6. LongAdder 源码分析

    LongAdder LongAdder 能解决什么问题?什么时候使用 LongAdder? 1)LongAdder 内部包含一个基础值[base]和一个单元[Cell]数组. 没有竞争的情况下,要累加 ...

  7. FOUC(Flash Of Unstyled Content)文档样式闪烁

    今天看面试题看到了这个新名词..我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧. 什么是文档样式闪烁(Flash Of Unstyled Co ...

  8. MySQL Cluster 与 MongoDB 复制群集分片设计及原理

    分布式数据库计算涉及到分布式事务.数据分布.数据收敛计算等等要求 分布式数据库能实现高安全.高性能.高可用等特征,当然也带来了高成本(固定成本及运营成本),我们通过MongoDB及MySQL Clus ...

  9. xml、Json生成cs代码文件

    一:xml生成cs实体类 1.开始菜单>Visual Studio 2015> Visual Studio Tools>VS2015 开发人员命令提示 2.xsd xmlFileNa ...

  10. Linux(Ubuntu)常用命令(三)

    查看时间  cal :显示当前日期.  cal :显示全年日历./ cal -y 显示当年日历.  date :显示当前时间. 这几个一般不会用到了解即可. 查看进程信息  ps :显示当前进程. - ...