js中select下拉框重置_【干货分享】vuecli中组件封装概念方法指南

一 

前言

随着公有云产品的快速发展，产品线越来越多，功能越来越丰富。为能够更好地服务客户，提高产品交付效率，公有云产品组前端框架的选择也紧跟技术发展。前端方面使用的是时下十分流行的vue全家桶配合ElementUI进行构建。其中的组件(component)可以实现功能的复用，以及对其他逻辑的解耦。但是相信很多使用vue的朋友都会和我有相同的状况，自己封装了一个组件，但是没有在业务中发挥出其最大价值。在本文中，我们主要介绍一下vue框架中组件封装的思路以及方式方法，将组件封装的过程做到标准化。

- 二 -

Vue 组件的定义和功能

 定义：

• 组件(Component)是Vue.js最强大的功能之一。

• 组件可以扩展HTML元素，封装可重用代码。

• 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能。

• 所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象(除了一些根级特有的选项)，并提供相同的生命周期钩子。

功能：

• 能够把页面抽象成多个相对独立的模块

• 实现代码重用，提高开发效率和代码质量，使得代码易于维护

- 三 -

为什么要做组件封装

在多个移动云功能模块的前端模板框架搭建过程中，我们发现有很多类似的组件，如果每次开发都重新实现一遍组件，这明显是费时费力，所以我们想到了将某些形似的组件给剥离出来，封装成组件组，之后在开发过程中如果遇到了类似的，直接复用模块就可以了。恰好，之前有一个滑块组件的功能需求，需要应用于云主机相关产品中，而原生ElementUI中的滑块组件不太符合需求，很难将其重写复用，所以在这就以此组件开发封装过程为例，抛砖引玉，拿出来和大家分享一下，希望对大家有所帮助。

- 四 -

组件封装

在写一个功能组件之前，需要根据原型，确定组件是新写呢还是对其他组件的进一步封装。之后需要确定此组件是注册方式。最后需要明确参数的传入传出，同时要注意组件的可扩展性。

• 组件的构成方法

以之前所说的滑块组件为例，首先我们看一下原型和ElementUI提供的滑块组件的对比：

在这两图的对比中，很明显可以看出，ElementUI所提供的滑块组件不提供下标显示功能，在经过考虑之后，发现如果重写ElementUI组件，所花的时间成本较高，不利于移动云功能模块快速开发的需求。所以在这里笔者决定在npm上寻找类似开源组件，在此基础上进行定制化重写，进行进一步封装。最后本人采用的是由nightcatsama开发贡献的vue-slider-component的组件(https://www.npmjs.com/package/vue-slider-component)，其demo如下图显示：

使用npm install vue-slider-component -save命令安装此组件。

• 文件目录格式与注册配置方式

sliderComp.vue是笔者封装的组件文件。如果组件需要局部注册，则可将组件文件放置在该功能模块文件夹下，例如上图中的function文件夹。这里建议在该功能模块文件夹下新建组件的文件夹，同时增加index.js文件，这样能够使文件目录更加清晰，利于维护。局部注册的index.js文件内容如下：

如果需要在views中或者其他组件中使用此组件的话，添加引用：

此外，组件也可以进行全局注册，这样的话其中的index.js文件就要添加相关配置项：

同时在主函数main.js中也需要添加对应的配置：

这样就所有实例都可以直接使用此组件了。但是值得注意的是，全局注册往往是不够理想的，比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

• 组件内部的需求分析以及实现

组件的实现归根结底就是理清子组件与父组件之间的关系：父组件 —> 子组件传值(props)、子组件 —> 父组件传值($emit)以及插槽(slot)。对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，因为有4个相同的车轮，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来。接下来根据之前的滑块组件实例来深入说明一下。

第一步就是分析一下原型图(可以看上面的那张)。原型图中3个重要元素需要在组件中体现：1. 滑动条；2. 下标；3. 滑块以及上标。此外，根据观察移动云其他滑动条，发现在有些业务环境下需要在滑动条前增加一个下拉选择框。这样的话，我们可以把传入参数props给定下来：

?diskData：滑块的数据填充，控制下标显示以及滑块能选定的值，必填项，数据类型为Array。

⚪ labelDisplay：控制下标是否显示，选填项，默认值为true，数据类型为Boolean。

⚪ labelIntervalTimes：控制下标间隔多少显示一次，防止数据量很大，从而下标显示过密导致看不清，选填项，默认值为1，数据类型为Number。

⚪selectDisplay：控制下拉选择框是否显示，选填值，默认值为false, 数据类型为Boolean。

⚪ selectCompDefaultValue: 下拉框默认选择的值，选填值，默认值为空，数据类型为String。

⚪selectCompList： 下拉框的数据填充，控制下拉框能够选择的值，选填项，默认值为空，数据类型为Array。

⚪ inputDisplay： 控制输入框是否显示，选填值，默认值为空，数据类型为String。

第二步就是编写组件的UI模块代码了。此滑块组件有3部分组成，下拉框和输入框都是通过ElementUI中的Select和Input组件构成的。中间的滑块条是对vue-slider-component的部分重写完成。重写分为3部分：

1. 修改部分css文件将原生下标美化；

2. 修改下标显示步长，因为移动云产品的数据并不一定是连续的，例如可选择的数据为1-2-3-6-9-12-16-20等；

3. 增加滑块的显示上标。

最后一步就是确定数据如何从子组件内部传递到父组件。针对此滑动组件，需要传递的有2个值，一个是下拉选择框选定的值，另一个是滑块选择的值。下拉框的值直接通过$emit传递出去就可以，滑块选择的值因为是个快速变化的值，这里选择的是监听此值，当有变化的时候将新值传递出去。同理，组件内部，滑块和输入框的值同步也是使用的这种方法--双向监听。

• 组件的最终效果

到这里，这个滑块组件的封装就差不多结束了。最终的显示效果如下图所示，基本能满足各个场景的使用需求：

   - 五  -

组件的发布

此外，一个必要的readme也是十分必要的，可以帮助之后的同事快速了解组件的使用方法以及组件内部的逻辑流转过程。

如果想将组件开源发布到社区，那么还需要添加部分示例测试代码模块，同时也需要修改一下webpack.config的配置文件。最后使用npm的发布命令就可以将组件发布到npm的社区大家庭啦，其中具体操作方式此篇就不展开了，如果同学们有兴趣的话可以参照此文发布内容：

(https://blog.csdn.net/qq_36256944/article/details/80459383)。

  -  END  -

往期精彩

1.【干货分享】服务器Power电路设计(下)

2.【干货分享】GlusterFS vs. CephFS性能对比研究(一)

3.【干货分享】从一个问题认识git rebase和git merge