基于 vue.js 进行组件封装的方案

Posted 2023-03-30 Mr.T's Blog

摘要：本文将介绍如何基于 vue.js 进行组件封装的方案。我们将从分析组件封装的优势开始，然后依次介绍 vue.js 的基本概念，以及如何创建、封装和使用自定义组件。最后，我们将通过一个实际的示例，演示如何实现一个基于 vue.js 的组件封装方案。

一、组件封装的优势

复用性：组件封装可以将常用的功能或视图模块抽象为独立的组件，从而实现代码的复用，提高开发效率。

一致性：通过组件封装，可以保证项目中各个部分的风格和功能保持一致，减少因为代码重复而导致的维护成本。

易维护：组件封装使得代码结构更加清晰，便于后期维护和升级。

二、创建自定义组件

首先，在项目中创建一个新文件夹，例如：components，用于存放自定义组件。

在 components 文件夹中，创建一个新的 .vue 文件，例如：CustomComponent.vue。

在 CustomComponent.vue 文件中，编写组件的模板、逻辑和样式。

<template>
  <div class="custom-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default 
  name: 'CustomComponent',
  props: 
    // 组件属性
  ,
  data() 
    return 
      // 组件数据
    ;
  ,
  methods: 
    // 组件方法
  ,
;
</script>

<style scoped>
.custom-component 
  /* 组件样式 */

</style>

四、封装组件

在 src 文件夹下创建一个新文件夹，例如：plugins，用于存放自定义插件。

在 plugins 文件夹中，创建一个新的 .js 文件，例如：custom-component-plugin.js。

在 custom-component-plugin.js 文件中，编写插件代码，引入并注册自定义组件。

import CustomComponent from '@/components/CustomComponent.vue';

const CustomComponentPlugin = 
  install(Vue) 
    Vue.component('custom-component', CustomComponent);
  ,
;

export default CustomComponentPlugin;

五、使用自定义组件

在项目的入口文件（例如：main.js）中，引入并使用自定义插件。

 
import Vue from 'vue';
import CustomComponent

Vue.js 自定义组件封装实录——基于现有控件的二次封装（以计时器为例）

在本人着手开发一个考试系统的过程中，出现了如下一个需求：制作一个倒计时的控件显示在试卷页面上。本文所记录的就是这样的一个过程。

前期工作

对于这个需求，自然我想到的是有没有现成的组件可以直接使用（本着不重复发明轮子的原则）。于是我就在 GitHub 上找寻。确实找到了不少，但是与需求之间的差距还比较大。从零开始写又不太现实（时间摆在那里，加之自己的前端也是刚学，还没有从零开始手撸一个控件的能力），所以在已有组件的基础上进行二次封装便成了一个比较可行的方法（几乎也是唯一解）。遂在 npm 上以 countdown 为关键词搜索，最后找到了 Vue Awesome Countdown 这个组件。这个组件几乎满足了需求，只是它还没有像样的展示形式。所以针对它的二次封装主要就是围绕这个展开。

对于考试倒计时的组件，我希望它有两个功能：在页面上展示剩余时间、在考试结束时自动交卷。接下来的内容就围绕这个展开。

时间显示

要想在页面上进行时间显示。首先需要知道这个倒计时组件是如何保存时间的。翻阅文档得知，保存在组件中的时间是以 timeObj 的形式进行存储（timeObj 的完整格式见下）。对于需求来说，我们只需要其中的 timeObj.h、timeObj.m、timeObj.s 即可。

    "endTime": 1542634411361,
    "speed": 1000,
    "leftTime": 97019,
    "d": "0",
    "h": "00",
    "m": "01",
    "s": "37",
    "ms": "019",
    "org": 
        "d": 0.001134247685185185,
        "h": 0.02722194444444444,
        "m": 1.6333166666666665,
        "s": 37.998999999999995,
        "ms": 19
    ,
    "ceil": 
        "d": 1,
        "h": 1,
        "m": 2,
        "s": 98
    

倒计时的时长，则可以通过后端传过来的考试记录信息进行推算，然后作为一个参数传入，结合网站提供的示例，很快就写出了以下代码：

<template>
  <div id="timer-view">
    <p class="title">距离考试结束还有</p>
    <countdown :end-time="new Date().getTime() + remainingTimes">
      <div class="timer" slot="process" slot-scope=" timeObj ">
         `$timeObj.h:$timeObj.m:$timeObj.s` 
      </div>
    </countdown>
  </div>
</template>

<script>
export default 
  name: 'timer',
  props: 
    remainingTimes: Number
  

</script>

<style scoped>
#timer-view 
  margin: 15px;
  border: solid 1px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

.title 
  text-align: center;

.timer 
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  color: red;
  font-weight: bold;

</style>

计时结束事件

显示的问题解决后，下面要处理的是计时结束后的自动交卷。官方文档中提到了该组件有如下四个事件可以处理：

Event	Explain	Parameters
start	Functions executed at the beginning of countdown	vm
process	Function executed when countdown is performed	vm
stop	Function executed when countdown stops	vm
finish	Function executed when countdown finished	vm

不难看出，对于需求来说，可以响应它的 finish 事件完成这一功能。这里限于本人对 Vue 的事件响应了解还不是很透彻，这里采用了一个比较麻烦的手法处理该问题（将响应 finish事件的函数作为参数传入组件，然后对应的部分直接写 @finish="传入的参数"）。之后对 Vue 的理解更加深入后会改回事件响应的那套模型。

<!--
    计时器组件
    Author: 刘忠燏 ([e-mail])
  -->
<template>
  <div id="timer-view">
    <p class="title">距离考试结束还有</p>
    <countdown :end-time="new Date().getTime() + remainingTimes" @finish="endCallback">
      <div class="timer" slot="process" slot-scope=" timeObj ">
         `$timeObj.h:$timeObj.m:$timeObj.s` 
      </div>
    </countdown>
  </div>
</template>

<script>
export default 
  name: 'timer',
  props: 
    remainingTimes: Number,
    endCallback: Function
  

</script>

<style scoped>
#timer-view 
  margin: 15px;
  border: solid 1px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

.title 
  text-align: center;

.timer 
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  color: red;
  font-weight: bold;

</style>

以上就是计时器的完整代码，要使用它，只要传入合适的参数给该组件即可：

<template>
  <div>
    <timer :remaining-times="remainingTimes" :end-callback="onFinished"></timer>
  </div>
</template>

<script>
import Timer from '@/components/Timer'

export default 
  name: 'paper-view',
  components: 
    'timer': Timer
  ,
  methods: 
    onFinished () 
      // ...
    ,
  ,
  computed: 
    remainingTimes () 
      // ...
    
  

</script>

<style>

</style>

总结

通过 这次的组件封装，我对 Vue 的组件有了进一步的认识，也暴露出我在 Vue 的事件模型上了解得还不够深入，在之后的工作中我还需要在这方面继续深入学习。