热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Vue中component标签解决项目组件化操作

这篇文章主要介绍了Vue中component标签解决项目组件化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

一、 啰嗦几句

在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if、for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式:

1. 大容量单组件开发,渲染和传入的数据使用各种type、ctype判断

2. 使用插槽开发,根据type调用对应的组件

3. 使用component加载组件的方式,动态渲染调用组件

最终选择:第三种方式,采用标签动态引入的方式开发

二、 官方文档解释

1. https://cn.vuejs.org/v2/guide/components.html#动态组件

2. https://cn.vuejs.org/v2/guide/components-dynamic-async.html

3. https://jsfiddle.net/chrisvfritz/o3nycadu/

三、 开发步骤

1. 首先按照大组件模式开发,功能拆分,统一在大组件中实现所有功能模块的样式 ( 注意:需要在在局部样式覆盖全局样式的条件需要在样式中使用 /deep/ 、 >>> )


 

 

2. 单个功能组件剥离成单独的组件文件

(1)搜索:fi-search.vue

(2)下拉: fi-select.vue

(3)标签:fi-tab.vue

(4)时间:fi-time.vue

然后在每个单独的组件内设置默认的props值,通过这个值来动态渲染组件和绑定数据,根据组件类别绑定click或者change事件

3. 选择一个下拉功能文件源码示例分析


 

4. 调用下拉框示例

四、 数据渲染和管理的逻辑

我们将通过数据渲染及绑定所有组件内容,所以数据的结构如下:

export const listFilters = [{
  title: '工作状态',
  type: 'tab',
  emit: '',
  contents: [
    {name:'all',text: '全部'},
    {name:'not-issued', text: '未完成'},
    {name: 'is-issued',text:'已完成'},
    {name: 'is-ended',text: '已结束'}
  ]
},{
  title: '工作时间',
  type: 'time',
  emit: '',
  contents: [
    { type:'tab',name:'all',text: '全部' },
    { type:'tab',name:'today', text: '今天' },
    { type:'tab',name: 'week',text:'一周内' },
    { type:'tab',name: 'week',text:'这个月' },
    { type:'custom',name:'custom',sv:'',ev:'' }
  ]
},{
  title: '来源类别',
  type: 'select',
  emit: '',
  contents: {
    options: [
      { label: '类型 1', value: 1 },
      { label: '类型 2', value: 2 },
      { label: '类型 3', value: 3 },
      { label: '类型 4', value: 4 }
    ],
    value: ''
  }
},{
  title: '网站名称',
  type: 'select',
  emit: '',
  contents: {
    options: [
      { label: '腾讯网', value: 1 },
      { label: '新浪网', value: 2 },
      { label: '网易网', value: 3 },
      { label: '凤凰网', value: 4 },
      { label: '搜狐网', value: 5 }
    ],
    value: ''
  }
},{
  title: '工作搜索',
  type: 'search',
  contents: {
    inputValue: ''
  }
}];

五、组件遍历调用渲染


 

 

六、 最终案例预览效果

补充知识:vue中component组件使用——模块化开发和全局组件

1、模块化开发组件:

box1.vue文件如下:


 

box2.vue文件如下:import引入box1.vue,components设置,然后设置成标签使用

2、全局组建

// 注册 Vue.component('my-component', { template: '
A custom component!
' }) // 创建根实例 new Vue({ el: '#example' })

渲染为:

A custom component!

以上这篇Vue中component标签解决项目组件化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • Lodop中特殊符号打印设计和预览样式不同的问题解析
    本文主要解析了在Lodop中使用特殊符号打印设计和预览样式不同的问题。由于调用的本机ie引擎版本可能不同,导致在不同浏览器下样式解析不同。同时,未指定文字字体和样式设置也会导致打印设计和预览的差异。文章提出了通过指定具体字体和样式来解决问题的方法,并强调了以打印预览和虚拟打印机测试为准。 ... [详细]
  • 阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾
    本文介绍了阿里Treebased Deep Match(TDM)的学习笔记,同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法,再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用,并介绍了TDM的背景和优势。最后,文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]
  • Final关键字的含义及用法详解
    本文详细介绍了Java中final关键字的含义和用法。final关键字可以修饰非抽象类、非抽象类成员方法和变量。final类不能被继承,final类中的方法默认是final的。final方法不能被子类的方法覆盖,但可以被继承。final成员变量表示常量,只能被赋值一次,赋值后值不再改变。文章还讨论了final类和final方法的应用场景,以及使用final方法的两个原因:锁定方法防止修改和提高执行效率。 ... [详细]
  • 本文介绍了求解gcdexgcd斐蜀定理的迭代法和递归法,并解释了exgcd的概念和应用。exgcd是指对于不完全为0的非负整数a和b,gcd(a,b)表示a和b的最大公约数,必然存在整数对x和y,使得gcd(a,b)=ax+by。此外,本文还给出了相应的代码示例。 ... [详细]
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 电销机器人作为一种人工智能技术载体,可以帮助企业提升电销效率并节省人工成本。然而,电销机器人市场缺乏统一的市场准入标准,产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质,尤其要关注语音识别率。 ... [详细]
  • 打开文件管理器_【教程】模组管理器3.1食用指南
    文编:byakko最近有部分小伙伴反应还不会使用unity模组管理器,现在我就给大家讲一下unity模组管理器——从下载到使用。完整视频版以下是无WiF ... [详细]
  • 本文详细介绍了C语言中的格式化字符串类型,包括浮点数、十六进制数字、p-计数法、十进制整数、小数形式、实数、有符号整数和输出字符串等。对于每种类型,都给出了详细的解释和示例。通过本文的学习,读者将对C语言中的格式化字符串类型有更深入的理解。 ... [详细]
  • 本文详细解析了JavaScript中相称性推断的知识点,包括严厉相称和宽松相称的区别,以及范例转换的规则。针对不同类型的范例值,如差别范例值、统一类的原始范例值和统一类的复合范例值,都给出了具体的比较方法。对于宽松相称的情况,也解释了原始范例值和对象之间的比较规则。通过本文的学习,读者可以更好地理解JavaScript中相称性推断的概念和应用。 ... [详细]
  • Linuxchmod目录权限命令图文详解在Linux文件系统模型中,每个文件都有一组9个权限位用来控制谁能够读写和执行该文件的内容。对于目录来说,执行位的作用是控制能否进入或者通过 ... [详细]
  • Skywalking系列博客1安装单机版 Skywalking的快速安装方法
    本文介绍了如何快速安装单机版的Skywalking,包括下载、环境需求和端口检查等步骤。同时提供了百度盘下载地址和查询端口是否被占用的命令。 ... [详细]
  • 本文介绍了使用CentOS7.0 U盘刻录工具进行安装的详细步骤,包括使用USBWriter工具刻录ISO文件到USB驱动器、格式化USB磁盘、设置启动顺序等。通过本文的指导,用户可以轻松地使用U盘安装CentOS7.0操作系统。 ... [详细]
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • 安装mysqlclient失败解决办法
    本文介绍了在MAC系统中,使用django使用mysql数据库报错的解决办法。通过源码安装mysqlclient或将mysql_config添加到系统环境变量中,可以解决安装mysqlclient失败的问题。同时,还介绍了查看mysql安装路径和使配置文件生效的方法。 ... [详细]
author-avatar
开心123
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有