组件,是一个具有一定功能,且不同组件间功能相对独立的模块。高内聚、低耦合。
 
开发可复用性的组件应遵循以下原则:
 
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. React-Native 之 GD (十一)加载更多功能完善 及 跳转详情页

    1.加载更多功能完善 GDHome.js /** * 首页 */ import React, { Component } from 'react'; import { StyleSheet, Text ...

  2. nginx 和 php

    sudo apt-get install nginx sudo groupadd www sudo useradd -g www www /etc/nginx/nginx.conf service n ...

  3. 来自鸟哥的lftp客户端软件使用方法

    lftp (自動化腳本) 單純使用 ftp 總是覺得很麻煩,有沒有更快速的 ftp 用戶軟體呢?讓我們可以使用類似網址列的方式來登入 FTP 伺服器啊?有的,那就是 lftp 的功能了! lftp 預 ...

  4. Ajax的封装。

    封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用.    封装支持接收来 ...

  5. 【opencv】opencv图像识别的一些基础的基础函数的使用方法

    import cv2 import numpy as np from matplotlib import pyplot as plt pic_path = "deal_with.png&qu ...

  6. 应用安全_WTS-WAF绕过

    Access 检测: ?id=+AND+= ?id=+AND+=2 绕过: sqlmap.py -u http://www.xx.com/project.asp?id=29 --tables --ta ...

  7. 应用安全-web安全-WebShell整理

    shellcode.aspx <%@ Page Language="C#" AutoEventWireup="true" Inherits="S ...

  8. 20191105 《Spring5高级编程》笔记-【目录】

    背景 开始时间:2019/09/18 21:30 Spring5高级编程 版次:2019-01-01(第5版) Spring5最新版本:5.1.9 CURRENT GA 官方文档 Spring Fra ...

  9. [19/05/25-星期六] JavaScript_ 基础知识和基本语法_数据类型

    一.概念 诞生于1995年,刚开始主要用于处理网页中的前端验证(指的是检查用户输入的内容是否符合一定的规则,比如用户名的长度.密码的长度.邮箱格式等). 前身是网景公司的LiveScript语言,傍的 ...

  10. hdu-1045.fire net(缩点 + 二分匹配)

    Fire Net Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...