组件,是一个具有一定功能,且不同组件间功能相对独立的模块。高内聚、低耦合。
 
开发可复用性的组件应遵循以下原则:
 
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. 三十五、robotframework中怎么将100转化成100.00

    1.将100转化成100.00

  2. fedora如何使用themes主题?

    DBus: 是一个 local 的IPC 进程间通信机制 如果是(一对一) 多对多的通信, 则DBUS 后台充当了一个路由器的角色. ibus: 是包含: python gtk dbus的 scim- ...

  3. centos6.5搭建禅道

    linux用一键安装包 简介:本文介绍如何在linux下面使用禅道一键安装包搭建禅道的运行环境. 一.安装 二.如何访问数据库 linux一键安装包内置了XXD.apache, php, mysql这 ...

  4. Monte Carlo Control

    Problem of State-Value Function Similar as Policy Iteration in Model-Based Learning, Generalized Pol ...

  5. Spark-Core RDD概述

    一.什么是RDD 1.RDD(Resilient Distributed DataSet)弹性分布式数据集 2.是Spark中最基本的数据抽象 3.在代码中是一个抽象类,它代表一个弹性的.不可变的.可 ...

  6. SpringBoot 整合 MybatisPlus (项目的创建及简单的单表查询)

    添加依赖 <!--mybatis-plus的springboot支持--> <dependency> <groupId>com.baomidou</group ...

  7. IDEA创建SpringBoot+maven项目

    1.创建项目: 2.选择spring Initializr,注意要选择jdk,使用默认的spring.io这样就不用再去写pom文件了 3.输入项目名称: 4.选择Spring Web 5.目录结构:

  8. [2019杭电多校第二场][hdu6599]I Love Palindrome String(回文自动机&&hash)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6599 题目大意为求字符串S有多少个子串S[l,r]满足回文串的定义,并且S[l,(l+r)/2]也满足 ...

  9. 媒介查询demo

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 利用 Python 进行批量更改文件后缀

    利用 Python 进行批量更改文件后缀 代码 import os files = os.listdir('.') for file_name in files: portion = os.path. ...